在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,"西红柿");
                }
            }
Logo

前往低代码交流专区

更多推荐