Question

简单问题：是否可以将对象视为新属性？

在JSFiddle中，我只初始化列表中第一项的属性“show”。当我点击“切换”第一个项目时，它可以工作。

但是对于其他项目（动态获取“show”属性）和myObject（动态获得“test2”属性），只有在切换列表的第一项时才刷新它！

在我的情况下，我希望切换立即起作用。

有人有解释吗？

new Vue({
  el: "#app",
  data: function()  {
    return {
    	myObject: { test: 'test' },
      list: [{
        value: 1,
        show: true
      }, {
        value: 2
      }, {
        value: 3
      }, {
        value: 4
      }, {
        value: 5
      }]
    }
  },
  methods: {
    toggleItem: function( item ) {
    	if( !item.show ) item.show = true;
    	else item.show = !item.show;
      console.log(item.show)
      this.myObject.test2 = 'test2';
    }
  },
  watch: {
  	list: function( newValue ) {
    	console.log('NEW VALUE: ', newValue );
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.js"></script>

<div id="app">
{{ myObject }}
  <div v-for="item in list">
    <span v-if="item.show">
      {{ item.value }}
    </span>
    <button @click="toggleItem(item)" type="button">Toggle !</button>
  </div>
</div>

Answer 1

要帮助Vue选择新属性，您必须使用Vue.set() / this.$set添加它们。否则，Vue无法检测到添加，新属性也不会被反应。

if( !item.show ) this.$set(item, 'show', true)

https://vuejs.org/v2/api/#Vue-set

通常，我们强烈建议您事先在data()

中设置所有属性

如何在对象具有新属性时观察

1 个答案: