鍍金池/ 問答/C  網(wǎng)絡安全  HTML/ vue給data的屬性賦值時，有時不會響應式更新到視圖。

vue給data的屬性賦值時，有時不會響應式更新到視圖。

當只修改data.list數(shù)組的值時，控制臺打印數(shù)據(jù)已更新，但是視圖不更新。
如果家還是那個一條修改name屬性的值時。又可以了。

不知是什么原因，求教！

// this.data.name = 'web...'
this.data.list[0] = 'aaa';
this.data.list[1] = 'bbb';
this.data.list[2] = '333333';

clipboard.png

this.data.name = 'web...'
this.data.list[0] = 'aaa';
this.data.list[1] = 'bbb';
this.data.list[2] = '333333';

clipboard.png

test.vue

<template>
  <div class="v-set-wrap">
    <span class="set-item">{{data.name}}, {{data.list}}</span>
    <button @click="changeData">changeData</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: {
        name: 'vue',
        list: [1, 2, 3]
      }
    };
  },
  methods:{
    changeData(){
        // this.data.name = 'web...'; // 不修改name屬性值時，視圖不會更新
        this.data.list[0] = 'aaa';
        this.data.list[1] = 'bbb';
        this.data.list[2] = '333333';
        console.log(this.data);
    }
  },
  mounted(){}
};
</script>
回答
編輯回答
青瓷

name是值，'list'是數(shù)組，數(shù)組操作除非是push、splice這些增刪操作的時候，才會更新到視圖。
對對象、數(shù)組操作，這里你需要用this.$set(arr,idx,data)方法

this.$set(this.list,0,'aaa');
this.$set(this.list,1,'bbb');
this.$set(this.list,2,'333333');

$set參考

2017年7月30日 14:32
編輯回答
心上人

vue只監(jiān)聽了數(shù)組的splice,push,unshift等方法
你可以用set來修改

2017年8月21日 14:40
編輯回答
浪婳

你這樣直接對數(shù)組操作是不會觸發(fā)dom的更新的，更改了name之后可以更新，是因為更改name可以觸發(fā)dom更新，所以數(shù)組的值也能更新，要操作數(shù)組有兩種方法：
1.this.$set(this.data.list, 0,'aaaa')
2.this.data.list.splice(0, 1,'aaaa')

https://cn.vuejs.org/v2/guide...

2017年4月2日 13:54
編輯回答
乖乖噠

我覺得這是vue的一個bug!
既然數(shù)據(jù)都更新了，視圖沒更新。。

2017年5月29日 07:34
編輯回答
尐飯團

請使用this.$set()來操作。

2018年2月5日 08:54