日期：2019 年 9 月 26 日
关于 vue 渲染报错：属性 undefined
vue-render.png
情景再现
事情的经过是这样的，我在定义数据的时候定义的是一个空的数组，之后通过某种操作往里面丢一个一个的对象，字段都在这些对象里面，然后渲染的时候，我直接去取数据，但由于数组前期没有值，后面才有的值，而页面渲染刚的时候还没有拿到这个值，所以才出现了上述的场面，这种情况在接口调用的时候尤为常见，当发起异步请求的时候，数据在页面渲染的时候还没到位，所以就会报上述错误
<template>
// ...
<div v-for="(item,$index) in repetitionList[currentNumber].questions" class="main" :key="$index">
// ....
</div>
// ...
</template>
<script>
export default {
data(){
return{
repetitionList: [],
dynamicValidateFormType: {
topicNumber: 0,
topicContent: '类型名称',
typetopic: 'QuestionType',
sequence: '',
questions: [],
},
}
},
methods: {
// ...
insertTypeIntoList: function(){
var ques = JSON.parse(JSON.stringify(this.dynamicValidateFormType));
this.repetitionList.push(ques);
}
},
}
</script>
解决方案
方案一
如果是个单一的对象的话，要是提前就知道里面有哪些字段，可以在定义的时候直接显示的声明出来就可以了
方案二
在节点上用 if 判断一下，当有数据的时候在进行渲染即可
<template>
// ...
<div v-if="repetitionList[currentNumber] && repetitionList[currentNumber].topicContent">
<div v-for="(item,$index) in repetitionList[currentNumber].questions" class="main" :key="$index">
// ....
</div>
</div>
// ...
</template>
