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

Question

<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这个组件库，这段代码就是在使用其中的无线下拉组件时出错的，不知道与组件库是否有关系...

Answer 1

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

<template>

    <header @click="loadMore"></header>

    <ul>

        <li track-by="$index" v-for="item in list">

            {{$index}}-{{item}}

        </li>

    </ul>

</template>