vue数据绑定数组,改变元素时不更新view问题

欢迎访问我的个人博客:http://xiaolongwu.cn
前言

关于这个问题,官网上说的很清楚官方文档
1
2

写个例子
HTML
<body>
    <div class="box">
        <div v-for="aa in aas">{{aa}}</div>
        <button @click="change">变数据 </button>
    </div>
</body>
js
var vm = new Vue({
            el:".box",
            data:{
                aas:["ss","ddd","fff","bbb"]
            },
            methods:{
                change(){
                // 点击按钮时,改变aas的最后一个元素,
                // 数据变了 但是view没有更新
                    this.aas[3] = 444;
                }
            }
        })
为什么

因为vue实现双向数据绑定的机制是数据劫持,也就是在所有对象上有个Object.defineProperty()方法,通过监听set,get方法去实现,而数组没有这两个方法,所以就不会更新view;解决方案就是,需要我们主动通知vue;

解决方案1
 methods:{
    change(){
        this.aas[3] = 444;
        // 在vm实例上通知
        vm.$set(this.aas,3,this.aas[3])
    }
}
解决方案2
 methods:{
    change(){
        this.aas[3] = 444;
        // 在全局对象上通知
        Vue.set(this.aas,3,this.aas[3])
    }
}
解决方案3
 methods:{
    change(){
        // vue本身可以监听到数组的一些方法,例如:
        // push(),pop(),shift(),unshift(),splice(),sort(),reverse()
        this.aas.splice(3,1,"444");
    }
}

我的个人博客:http://xiaolongwu.cn

如果您对我的博客内容有疑惑或质疑的地方,请在下方评论区留言,或邮件给我,共同学习进步。

邮箱:wuxiaolong802@163.com

  • 10
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
要实现外部点击按钮删除或添加table表格数据,你可以在Vue3中使用v-model来绑定table的数据,并在外部按钮的点击事件中修改这个数据。具体实现过程如下: 1. 在template中使用view-ui-plus中的table组件,并使用v-model绑定数据: ``` <template> <div> <el-button @click="addData">添加数据</el-button> <el-table v-model="tableData" :columns="columns"></el-table> </div> </template> <script> export default { data() { return { tableData: [], columns: [ // 列的定义 ], } }, methods: { addData() { // 添加数据的逻辑 }, } } </script> ``` 2. 在外部按钮的点击事件中修改tableData数组的值: ``` <template> <div> <el-button @click="addData">添加数据</el-button> <el-button @click="removeData">删除数据</el-button> <el-table v-model="tableData" :columns="columns"></el-table> </div> </template> <script> export default { data() { return { tableData: [], columns: [ // 列的定义 ], } }, methods: { addData() { // 添加数据的逻辑 }, removeData() { // 删除数据的逻辑 }, } } </script> ``` 3. 在添加或删除数据的逻辑中,修改tableData数组的值: ``` <template> <div> <el-button @click="addData">添加数据</el-button> <el-button @click="removeData">删除数据</el-button> <el-table v-model="tableData" :columns="columns"></el-table> </div> </template> <script> export default { data() { return { tableData: [], columns: [ // 列的定义 ], } }, methods: { addData() { this.tableData.push({ // 新数据的定义 }) }, removeData() { this.tableData.splice(index, 1); // index为要删除的数据在tableData中的下标 }, } } </script> ``` 这样就可以在外部按钮的点击事件中添加或删除table表格数据了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值