VueJS 动态属性名称未更新值

Question

我正在尝试实现关联数组并结合访问值中的属性，键基于活动对象的值。

<li v-for="campaign in campaigns">
    <input type="text" v-model="configuration[campaign._id].value"> {{ configuration[campaign._id].value }}
</li>

https://jsfiddle.net/4yc3bujt/1/

我是不是遗漏了什么，感觉真的被窃听了。在 VueJS 1 中尝试执行此操作时会发生几乎完全相同的情况，两次都不会引发任何错误。

Answer 1

发生这种情况是由于 caveats of reactivity in vue.js. You have just defined configuration: {} initially in data, so configuration[key] are not reactive. To make these reactive, you have to use this.$set:

Set a property on an object. If the object is reactive, ensure the property is created as a reactive property and trigger view updates. This is primarily used to get around the limitation that Vue cannot detect property additions.

使用如下：

this.campaigns.forEach((campaign) => {
  var id = campaign._id;
  this.$set(this.configuration, id, {'value': 'default value'})
})

var app = new Vue({
  el: '#app',

  data: {
    campaigns: [],
    configuration: {}
  },

  mounted: function() {
    this.campaigns = [{
      _id: 'abcdefg'
    }, {
      _id: 'kejwkfe'
    }, {
      _id: 'iruwiwe'
    }, {
      _id: 'reiwehb'
    }];

    this.campaigns.forEach((campaign) => {
      var id = campaign._id;
      this.$set(this.configuration, id, {'value': 'default value'})
    })
  }
})

<script src="https://vuejs.org/js/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="campaign in campaigns">
      <input type="text" v-model="configuration[campaign._id].value" /> 
           {{ configuration[campaign._id].value }}
    </li>
  </ul>
</div>

Answer 2

具有反应性的属性必须在 Vue 构造函数创建的 Vue 实例中。

它确保属性是反应性的并触发视图更新，即它们在底层使用 Object.defineProperty 和 MutationObserver 初始化。

因此，使用Vue.set添加新属性，并使用Vue.delete删除。

查看更多信息 - Reactivity in Depth

VueJS 动态属性名称未更新值

VueJS dynamic property name not updating value

javascript

vue.js

vuejs2

VueJS 动态 属性 名称未更新值

VueJS dynamic property name not updating value

javascript

vue.js

vuejs2

VueJS 动态属性名称未更新值