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中的caveats of reactivity，这种情况正在发生。您刚刚在数据中定义了configuration: {}，因此configuration[key]不会被动。要使这些反应，您必须使用this.$set：

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

使用如下：

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

＆＃13;

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'})
    })
  }
})

＆＃13;

<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>

＆＃13;

Answer 2

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

它确保属性具有反应性并触发视图更新，即它们以Object.defineProperty和MutationObserver为基础进行初始化。

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

查看更多信息 - Reactivity in Depth

VueJS动态属性名称未更新值

2 个答案: