vue通过索引给数组赋值，页面不更新

最新推荐文章于 2022-12-05 18:56:27 发布

小feelings

最新推荐文章于 2022-12-05 18:56:27 发布

阅读量1.6k

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_22574487/article/details/106993451

版权

前端专栏收录该内容

18 篇文章

订阅专栏

问题：
将 “苹果” 变成 “香蕉”，打印数组，发现数值变了，但是页面没有渲染
在这里插入图片描述

<body>
<section id="demo">
    <ul>
        <li v-for="item in aaa">
            {{item}}
        </li>
    </ul>

    <button @click="change">将苹果变成香蕉</button>
</section>

<script>
    // 定义vue范围及监听的变量
    new Vue({
        el: '#demo',
        data: {
            aaa: ['苹果', '橘子', '梨']
        },
        methods:{
            change(){
                this.aaa[0] = '香蕉'
                console.log(this.aaa)
            }
        }
    })
</script>

解决方案：

将 change 方法里