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

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

_Adoph

2689人浏览 · 2019-04-18 22:07:22

_Adoph · 2019-04-18 22:07:22 发布

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^