VueJS 动态属性名称不更新值 [英] VueJS dynamic property name not updating value

问题描述

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

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

我是不是错过了什么，感觉真的很糟糕.在 VueJS 1 中尝试执行此操作时发生的情况大致相同，两次都没有抛出任何错误.

解决方案

这是由于 vue.js 中的反应性警告.您刚刚在数据中定义了 configuration: {}，因此 configuration[key] 不是响应式的.要使这些响应式，您必须使用 this.$set:

<块引用>

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

使用如下:

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

var app = new Vue({el: '#app',数据: {广告系列:[]，配置: {}},安装:功能(){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="应用程序"><ul><li v-for="广告系列中的广告系列"><input type="text" v-model="configuration[campaign._id].value"/>{{ 配置[campaign._id].value }}

I am trying to implement an associated array combined with accessing the property within the value, the key is based on the value of the campaign object.

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

Am I missing anything, it feels really bugged out. About exactly the same happens when trying to do this in VueJS 1, both times it's not throwing any errors.

解决方案

This is happening due to 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.

use like following:

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>

这篇关于VueJS 动态属性名称不更新值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！