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

---

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

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

---

使用开发版的 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" 属性就可以了。

---

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

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

---

header未闭合不知有没关系