v-for列表渲染后,向数组中push元素无法触发试图更新,是怎么回事呢?

<template>
    <header @click="loadMore"></header>
    <ul>
        <li v-for="item in list">
            {{$index}}-{{item}}
        </li>
    </ul>
</template>

<style> 

</style>

<script>
    let fn = {
        data(){
            return {
                list:[0,0,0,0,0,0]
            }
        },
        methods:{
            loadMore() {
                for (var i = 0 ; i<10; i++ ){
                    this.list.push(i)
                }
            }
        }
    };
    export default fn;
</script>

点击header,console.log出来的list数组中项是正常增加的,但是视图不会更新,甚至<li>还减少了一个,但是只会减少一次,之后再点击就不会减少。
而且列表一开始就是从第七项开始渲染的。

请问这可能是什么原因呢?


ps,我是用了饿了么前端的MintUI这个组件库,这段代码就是在使用其中的无线下拉组件时出错的,不知道与组件库是否有关系…

回答:

你需要加track-by $index , 可能和vue处理重复数据的设计有关,想了解原因得去看看源码

<template>
    <header @click="loadMore"></header>
    <ul>
        <li track-by="$index" v-for="item in list">
            {{$index}}-{{item}}
        </li>
    </ul>
</template>

回答:

使用开发版的 Vue.js 文件,打开控制台可以看到出错信息:

[Vue warn]: Duplicate value found in v-for="item in list": 0. Use track-by="$index" if you are expecting duplicate values.

给 li 元素添加 track-by=”$index” 属性就可以了。

回答:

刚才自己在试着写数据双向绑定
也有这个问题
查资料说vue的双向绑定实现原理是Object.defineProperty,定义对象属性的get和set方法来绑定model和view
然后我写完,想绑定view到一个数组上,然后数组push操作
发现没有触发set
但是我把push改成‘=’操作,直接赋值
发现就触发了set

手动分割

所以应该是Push操作不触发defineProperty的set方法,因为引用类型的值没有变化

回答:

header未闭合不知有没关系

回答:

https://github.com/vuejs/vue/…
尤大大说渲染重复的 primitive value 需要 track-by=”$index”

2.0 里面 track-by=”$index” 是默认行为就不需要了

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注