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 相关文章推荐
Javascript Math ceil()、floor()、round()三个函数的区别
Mar 09 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
JS实现添加,替换,删除节点元素的方法
Jun 30 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 Javascript
vue-父子组件和ref实例详解
Nov 10 Javascript
24个解决实际问题的ES6代码片段(小结)
Feb 02 Javascript
9个JavaScript日常开发小技巧
Oct 06 Javascript
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开发框架的对比
2013/07/05 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
javascript模拟枚举的简单实例
2014/03/06 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
通过js修改input、select默认字体颜色
2017/04/19 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
Python类定义和类继承详解
2015/05/08 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
对Python中画图时候的线类型详解
2019/07/07 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
numpy数组做图片拼接的实现(concatenate、vstack、hstack)
2019/11/08 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
python 实现Requests发送带cookies的请求
2021/02/08 Python
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
Ralph Lauren意大利官方网站:时尚界最负盛名的品牌之一
2018/10/18 全球购物
历史专业个人求职信分享
2013/12/20 职场文书
电气工程和自动化自荐信范文
2013/12/25 职场文书
基层党建工作汇报材料
2014/08/15 职场文书