javascript - 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>

这篇关于javascript - v-for列表渲染后，向数组中push元素无法触发试图更新，是怎么回事呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！