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が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', 
 

 
    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