关于 vue 渲染报错：属性 undefined页面可渲染

日期：2019 年 9 月 26 日

关于 vue 渲染报错：属性 undefined

情景再现

事情的经过是这样的，我在定义数据的时候定义的是一个空的数组，之后通过某种操作往里面丢一个一个的对象，字段都在这些对象里面，然后渲染的时候，我直接去取数据，但由于数组前期没有值，后面才有的值，而页面渲染刚的时候还没有拿到这个值，所以才出现了上述的场面，这种情况在接口调用的时候尤为常见，当发起异步请求的时候，数据在页面渲染的时候还没到位，所以就会报上述错误

<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>