Vue中关于修改数组或者对象后，页面不渲染的问题

最新推荐文章于 2024-05-06 09:44:47 发布

_Adoph

最新推荐文章于 2024-05-06 09:44:47 发布

阅读量2.6k

点赞数

分类专栏： Vue 文章标签： Vue

本文链接：https://blog.csdn.net/weixin_44189739/article/details/89389388

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在Vue中，如果修改数组中的某个值，或者是对象的某个值是不会立即更新到dom对象中的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <div v-for="val,key in arr">
            {{val}}--{{key}}
        </div>
        <button @click="clickMe">按钮</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                arr:["苹果","香蕉","梨"],
            },
            methods:{
                clickMe:function () {
                  this.arr[0]="西红柿";
                    console.log(this.arr);
                }
            }
        })
    </script>
</body>
</html>

点击按钮以后发现，arr[0]的‘苹果’已经被‘西红柿’替换掉了，但页面还是显示为苹果

那么，我们可以考虑用以下方法解决

1、将整个arr数组更换掉

  methods:{
                clickMe:function () {
                 	   var arr=this.arr;
                    	arr[0]="西红柿";
                    	this.arr="1";
                    	this.arr=arr;
                }
            }

中间将this.arr重新赋值为“1”或其他值，再将arr给this.arr赋值,能够即时更新到dom对象中
2、用Vue能监听到的操作来更新数组比如：splice push unshift 等
Vue 包含一组观察数组的变异方法,使用以下方法都能触发数据的更新
如：push() 、pop()、 shift()、unshift()、splice()、sort()、reverse()

  methods:{
                clickMe:function () {
                 	    this.arr.splice(0,1,"西红柿");
                }
            }

3、可以用vue的内置方法this.$set(target , key , value) 强制刷新视图（官方推荐方法）
target：要更改的数据源（可以是对象或者数组）；
key：要更改的具体数据，数组时则是数组下标值，如果是对象的话，就是相应的key值
value：重新赋的值

  methods:{
                clickMe:function () {
                 	  this.$set(this.arr,0,"西红柿");
                }
            }

_Adoph

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue中关于修改数组或者对象后，页面不渲染的问题

在Vue中，如果修改数组中的某个值，或者是对象的某个值是不会立即更新到dom对象中的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> ...
复制链接

扫一扫

专栏目录