vue异步axios获取的数据渲染到页面的方法


Posted in Javascript onAugust 09, 2018

我们在vue,数据很多事异步获取来的,如果在template直接使用,会报错,undefined。

因为先渲染后得到的数据,那如何才能不报错呢?

computed!!!

举个例子

index.vue

忽略坑人的传参方式。。。

created(){
  this.init()
  this.axios.post('/wanwei/appserver/eqInfo/eqBaseInfo?reqjson={"eq_code":"BJTE1W03011SF001SBQDGPXTGYKG001"}').then((res) => {
   this.$nextTick(()=>{
    this.$store.state.retData = res.data.retdata
   })
  })
 },

在创建时获取数据,将其存入store

加入页面只能这样写

equip.vue

<ul>
   <h3 class="tit">规格信息</h3>
   <li>
    <span class="key">设备惯用名</span>
    <span class="val">{{equipData.convent_eq}}</span>
   </li>
    <li>
     <span class="key">设备名称</span>
     <span class="val">{{equipData.eq_name}}</span>
    </li>
    <li>
     <span class="key">规格型号</span>
     <span class="val">{{equipData.modelno}}</span>
    </li>
   <li v-if="show">
    <span class="key">采购价格</span>
    <span class="val">{{equipData.cost_purchase}}</span>
   </li>
  </ul>

可以这样写,computed 属性,当equipData发生变化时,页面会自动渲染,如果数据没有获取到,默认它为空,这样就不会报错

computed:{
   equipData:function () {
    return this.$store.state.retData.eqInfo||''
   }
  },

以上这篇vue异步axios获取的数据渲染到页面的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习YUI.Ext 第四天--对话框Dialog的使用
Mar 10 Javascript
保证JavaScript和Asp、Php等后端程序间传值编码统一
Apr 17 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
根据表格中的某一列进行排序的javascript代码
Nov 29 Javascript
jquery的ajax跨域请求原理和示例
May 08 Javascript
浅谈Javascript中匀速运动的停止条件
Dec 19 Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 Javascript
JS中如何实现Laravel的route函数详解
Feb 12 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
新手如何快速理解js异步编程
Jun 24 Javascript
Node登录权限验证token验证实现的方法示例
May 25 Javascript
jquery实现穿梭框功能
Jan 19 jQuery
vue2.0的虚拟DOM渲染思路分析
Aug 09 #Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
Aug 09 #Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 #jQuery
详解Vue开发微信H5微信分享签名失败问题解决方案
Aug 09 #Javascript
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 #jQuery
详解在React中跨组件分发状态的三种方法
Aug 09 #Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 #jQuery
You might like
PHP 基本语法格式
2009/12/15 PHP
php遍历数组的方法分享
2012/03/22 PHP
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
php中require和require_once的区别说明
2014/02/27 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
ext监听事件方法[初级篇]
2008/04/27 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
django rest framework之请求与响应(详解)
2017/11/06 Python
Python IDLE入门简介
2017/12/08 Python
python实现内存监控系统
2021/03/07 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
python爬虫超时的处理的实例
2018/12/19 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
购房协议书
2014/04/11 职场文书
高中学生评语大全
2014/04/25 职场文书
企业读书活动总结
2014/06/30 职场文书
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
会议接待欢迎标语
2014/10/08 职场文书
六年级情感作文之500字
2019/10/23 职场文书
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL
Flask搭建一个API服务器的步骤
2021/05/28 Python
浅析Python中的随机采样和概率分布
2021/12/06 Python