vue的v-modal绑定值是后端返回的 明明有这个字段但是绑定之后控制台却打印报错'xxx' of undefined
如果你要绑定的变量是后台接口返回给你的并且里边还有嵌套一层的情况,需要注意
下图
这是后台返给我的数据
这是我要用的数据就是上图data里的,data里边还有对象和数组
然后这是我在vue文件里声明的数据结构
//弹框数据
modal: {
formData: {},
},
我在调完接口直接这样赋值到了vue里data的变量上
this.modal.formData = JSON.parse(res.data);
但是我在输入框绑定时再次刷新页面就会报错designNo这个是undefined
<el-input
v-model="modal.formData.form_bom.designNo"
disabled
clearable
style="width: 160px"
></el-input>
然后把vue里data的数据结构变了一下
//弹框数据
modal: {
form_bom: {},
form_desgin: {},
wlInfo: [],
gyInfo: [],
gxInfo: [],
},
然后在后端返回数据的时候这也赋值
res = JSON.parse(res.data);
this.modal.form_bom = res.form_bom;
this.modal.form_desgin = res.form_desgin;
this.modal.wlInfo = res.list_wlxx;
this.modal.gyInfo = res.list_tsgy;
this.modal.gxInfo = res.list_gx;
v-modal绑定改成了这样就不报错了
<el-input
v-model="modal.form_bom.designNo"
disabled
clearable
style="width: 160px"
></el-input>
大概原因是你要绑定的数据结构嵌套的原因,成了复杂数据类型,可以在data里再定义一层也可以解决
改完我的页面就没有再报错