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>&nbsp; &nbsp; <header @click="loadMore"></header>&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; <li track-by="$index" v-for="item in list">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{$index}}-{{item}}&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; </ul></template>