官方例子小改,出现组件内部无限循环问题,求助各位大佬
发布于 5天前 作者 hwlovett 103 次浏览 来自 问答

官方介绍父子组件通讯传值方式,给出的小例子,我稍作修改,出现异常,控制台报无限循环

代码如下:

    <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"> </todo-item>
<style> ul, li { list-style: none; } </style>

        Vue.component('todo-item', {
          props: ['todo'],
          template: '<li>{{ todo.id++ }} -- {{ todo.text }}</li>'
        })

        var app7 = new Vue({
          el: '#app',
          data: {
            groceryList: [
              { id: 0, text: '蔬菜' },
              { id: 1, text: '奶酪' },
              { id: 2, text: 'apple' }
            ]
          }
        })

输出: 1 – 蔬菜 2 – 奶酪 103 – apple 然后我在created 中console 结果发现如下: 1.png 2.png

第0次和第1次正常,到第二次结束后,多循环了100次,并且页面显示最后一次循环的结果

初学vue,解决问题的方式好几种。但是我想理解原因,求教各位,谢谢🙏

回到顶部