vue3接口数据赋值对象,渲染报错问题及解决_vue.js_

vue3接口数据赋值对象,渲染报错

const app = require('express')() // 跨域设置 app.all("*", function (req, res, next) { res.setHeader("Access-Control-Allow-Credentials", true); res.setHeader("Access-Control-Allow-Origin", '*'); // 添加这一行代码，代理配置不成功 res.setHeader("Access-Control-Allow-Methods", '*'); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, If-Modified-Since") next(); }) app.get('/', function (req, res) { res.send({ dict: 'sfasf', detailAddress:'1111111' }) }) app.listen(9999, () => { console.log('http://localhost:9999') })

用express启动了一个简单的node服务器写了一个测试接口

vue/cli创建的vue3项目，页面中通过接口获取的数据，注意第二个属性dict

现在我们用对象赋值的方法将res.data赋值给vue3的reactive里绑定的属性form

查看打印结果

报错了，但是页面能渲染 

如果我们把动态数据绑定的form初始化的值不用null，换成{}

打印结果

 没有报错，且能渲染  

总结：通过楼主查阅各种文档的细心研磨，发现vue3的动态数据绑定，在进行proxy代理的时候，get方法中的return返回时，使用了reflect反射来绑定this的指向

get:function(target,key){ return Reflect.get(target,key) }

我认为，如果初始值为null，会导致this指向null，引发这个报错问题，目前楼主认为是这个原因导致的。

vue在渲染数据的时候的一些报错问题

问题描述

vue在请求获取数据的时候，这个过程是异步的，但是刚进页面的时候，数据还未被获取到，是为空的，如果再次点击拿下一层数据时没办法拿到数据的，会报错

解决方法

i  在data中不使用null而是使用{}

ii可以在data中使用null，但是在渲染数据的外面的包一个div,使用v-if=" homeData"

在vue中请求数据的时候，同一个数据有的是数据是不存在的，有的是存在的，如果直接写会报错，这时候可以在没有的那个数据名后面加?l来作为判断，之后再往下点一层

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！