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

我们在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获取的数据渲染到页面的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue axios 表单提交上传图片的实例

    项目中用的element 的框架,然后在项目有一个添加数据需求是图片可上传,也可不上传, 然后问题就是element 中的上传控件在没有图片的时候是不会触发提交的,但接口写的是有file的  multipart/form-data    接收模式 所有只能自己另个模仿一个表单上传 <input class="file" name="file" type="file" accept="image/png,image/gif,imag

  • axios发送post请求,提交图片类型表单数据方法

    DOME <input type="file" @change="upload" ref="upload"> 接口 const userUploadAtt = (File,config) => axios.post("接口",File,config) 处理数据 let input = this.$refs.upload 创建一个空的FormData对象 let data = new FormData(); 使

  • axios异步提交表单数据的几种方法

    踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSecurity,使用postman测试后端的权限接口时发现都正常,但是使用vue+axios发送异步的请求后端一直获取不出axios提交的form表单的数据,爬坑两个半钟头找到了答案 axios用post异步形式提交的数据和我们直接使用from表单提交的数据的格式(Form Data格式)是不一样的,在下面列举 默认格式Request Payload 直接使用axios发送异步请

  • Vue axios 中提交表单数据(含上传文件)

    我们经常使用表单来上传数据,以及上传文件,那么怎么在表单提交成功的时候接受服务器的响应,并作出相应操作. 当然使用一般jQuery上传对象的格式也是可以的,如果使用传统的表单上传呢? <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport

  • 让axios发送表单请求形式的键值对post数据的实例

    想要发送键值对,其实是需要做响应处理的,直接上代码 npm install --save axios vue-axios qs qs是必不可少的插件,安装完成后,在main.js插入一下代码 //载入axios import Qs from 'qs' import axios from 'axios' import VueAxios from 'vue-axios' var axios_instance = axios.create({ baseURL:'http://localhost', t

  • 解决vue跨域axios异步通信问题

    在项目中,常常需要从后端获取数据内容.特别是在前后端分离的时候,前端进行了工程化部署,跨域请求成了一个前端必备的技能点.好在解决方案很多. 在vue中,在开发中,当前使用较多的是axios进行跨域请求数据,但不少人遇到如下问题: •异步通信,无法同步执行 •无法集中管理 •不便阅读 •还未请求成功就调转了 •then里面的逻辑越来越繁杂 以往的网络请求的写法如下: // main.js // 引入axios import axios from 'axios' Vue.prototype.$axi

  • 在vue中通过axios异步使用echarts的方法

    在vue中通过axios异步使用echarts的方法

    现实的工作中, 数据不可能是像之前的demo演示的那样把数据写死的. 所有的数据都应该通过发送请求进行获取, 所以, 这篇文章, 我将在Vue项目中使用Echarts: 在Vue中引入Echarts中的数据提取出来, 放入到static/data.json文件中,请求该文件获取数据. 一. 实现异步加载数据 (一)引入vue-resource 通过npm下载axios //命令行中输入 npm install axios --save 在main.js中引入axios并注册 // main.js

  • vuejs使用axios异步访问时用get和post的实例讲解

    script中. let data={....}; let url=xx; 方法各异: GET: this.$ajax.get(url,{ params:data }) .then(function (res) { console.log(res.data) }) .catch(function (error) { console.log(error) }) POST: 方法一:1. //请求后台数据之前转换入参 let url = xx; let data = { uname:this.una

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

    我们在vue,数据很多事异步获取来的,如果在template直接使用,会报错,undefined. 因为先渲染后得到的数据,那如何才能不报错呢? computed!!! 举个例子 index.vue 忽略坑人的传参方式... created(){ this.init() this.axios.post('/wanwei/appserver/eqInfo/eqBaseInfo?reqjson={"eq_code":"BJTE1W03011SF001SBQDGPXTGYKG001

  • vue利用axios来完成数据的交互

    vue利用axios来完成数据的交互

    axios基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用 现在Vue官方推荐的网络通信库不再是vue-resource了,推荐使用axios.所以学习了下,总结如下. 一.功能特性 1.在浏览器中发送 XMLHttpRequests 请求 2.在 node.js 中发送 http请求 3.支持 Promise API 4.拦截请求和响应 5.转换请求和响应数据 6.自动转换 JSON 数据 7.客户端支持保护安全免受 XSRF 攻击 二.axios的安装

  • vue对storejs获取的数据进行处理时遇到的几种问题小结

    具体代码如下所示: export default { data(){ return { shopList:{}, isEmpty:false, //判断购物车中是否有存在内容 } }, created(){ if(!store.get('?shopCar')){ this.isEmpty = true; }else{ //对数据处理 将商店中名中的地址分离出来 this.shopList = store.get('shopCar'); console.log(this.shopList) } }

  • vue使用ajax获取后台数据进行显示的示例

    实例如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/vue.min.js"></script> <script src="/vue-resource.min.js"&g

  • 解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题

    前几天在工作的过程中,在数据渲染的时候,发生了swiper那一部分的轮播图不在滚动,手动滑动也没有效果.一直感觉数据开始渲染,是不是数据渲染的时候,并没有生成swiper的节点呢.后来第一感觉就是把控制swiper轮播的函数放在初始化事件中去, 放在初始化事件中去: 结果并没有达到自己的理想状况,后来放在数据获取之后哪里在进行轮播事件的发生, swiper终于可以滑动了.其实这也不能算是一个什么大的问题点,只是单纯的想记录一下.以后在遇到相似的问题,更多的应该是从数据实现的先后来出发.这次就当做

  • vue获取data数据改变前后的值方法

    场景:购物车增加商品数量同时更新bridge标志上的总商品个数,如果只是加上当前变化后的数量的话则之前原有的数量会被重新添加一遍造成计算错误.因此要减去变化前的数量才能得到添加的数量. 方法一: 直接watch监听data的数据 watch: { a (now,old) { console.log(now,old) } } old为旧的值now为更新后的值 方法二:自定义指令 通过自定义指令将更新前的值绑定到对应自定义指令的元素的dataset上然后在vue文件里面通过ref获取到元素来获取旧的

  • vue中Axios添加拦截器刷新token的实现方法

    目录 1. Axios基本用法: 2. Axios基本封装用法: 3. 添加拦截器的用法 4. 注意事项: Axios是一款网络前端请求框架,基本用法如下: 1. Axios基本用法: const response = await Axios.create({ baseURL: "https://test.api.com", headers: { 'Content-Type': 'application/json', }, }).post<RequestResponse>(

  • html中通过JS获取JSON数据并加载的方法

    在写内容逻辑重复性的页面时,用json数据可以显著提高编程效率,并且便于后期的数据维护.因此,在视频专题页面,需要展示多列视频数据,我选择了用json. HTML如下(只展示重点部分,需要引用JQ) <div class="container-fluid content "> <div class="container neirong"> <div class="left fl"> <div class=

  • 通过nodejs 服务器读取HTML文件渲染到页面的方法

    1.分别简单实现三个备用页面. login.html页面 index.html页面 代码片段: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> .center { margin: auto; width: 60%; border: 3px solid #73AD21;

  • vue实现未登录跳转到登录页面的方法

    环境:vue 2.9.3; webpack;vue-router 目的:实现未登录跳转 例子:直接在url地址栏输入...../home,但是这个页面要求需要登陆之后才能进入,判断的值就通过登陆之后给本地缓存存入的token判断,如果没有就跳转到登录页面,有的话就打开. 图示: 1.直接在url地址栏输入http://127.0.0.1:9000/#/home,但是页面会直接跳转到登录页,而且会带上参数. --------------------------------------------分

随机推荐