更新vue.js中的數據屬性/對象

Question

有沒有一種方法可以以編程方式更新vue.js中的data對象/屬性？例如，當我的部件載荷，我的數據對象是：

data: function() { 
    return { 
     cars: true, 
    } 
} 

，並觸發一個事件後，我想data物體看起來像：

data: function() { 
    return { 
     cars: true, 
     planes: true 
    } 
} 

我想：

<script> 

module.exports = { 

    data: function() { 
     return { 
      cars: true 
     } 
    }, 

    methods: { 
     click_me: function() { 
      this.set(this.planes, true); 
     } 
    }, 

    props: [] 

} 

</script> 

但是這給了我錯誤this.set is not a function。有人可以幫忙嗎？

在此先感謝！

Answer 1

Vue不允許向已創建的實例動態添加新的根級別反應屬性。然而，這是可能的反應特性添加到一個嵌套的對象，所以，你可以創建一個對象，並添加一個新的屬性這樣的：

data: function() { 
    return { 
     someObject:{ 
      cars: true, 
    } 
} 

與設定方法添加屬性：

methods: { 
     click_me: function() { 
      this.$set(this.someObject, 'planes', true) 
     } 
    } 

爲vue 1.x使用Vue.set(this.someObject, 'planes', true)

reactivity