关于 vue 渲染报错:属性 undefined页面可渲染 - Go语言中文社区

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


日期: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>
版权声明:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/qq_41306423/article/details/101436635
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。

0 条评论

请先 登录 后评论

官方社群

GO教程

猜你喜欢