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

这是发生由于反应的警告在vue.js.您刚刚configuration: {}在数据中定义,所以configuration[key]不是被动的.要使这些反应,你必须使用它.$ set:

在对象上设置属性.如果对象是被动的,请确保将该属性创建为被动属性并触发视图更新.这主要用于解决Vue无法检测属性添加的限制.

使用如下:

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>