VueJS 2.0 v-modelの動的ターゲットv-for

Question

私のVueデータの配列から構築された約10個のselect要素のフォームがあります。

セレクターの配列が最初にして、空であるAJAX呼び出しは、配列を移入し、VueがHTMLを作成します - 私は私が望むちょうど私がv-model

で抱えている問題を示すために簡略化され、以下のスニペットを守ってきました選択したすべての値を持つオブジェクトを作成するため、以下の例に従ってv-model="selected[ selector.name ]"を使用しようとしています。私は例のように、空白のままにすると、{}

selected: { make: 'audi', fuel: 'petrol' } 

： 私は簡単に今これは私がこのようなselectedプロパティを初期化場合に動作selected.makeまたはselected.fuel

を求めることができるようにしたいです、更新されません。 selectedのすべてのプロパティを手動でハードコーディングする必要はなく、AJAX経由で送信されるサーバーサイドコードに1度だけリストしたいだけです。

別の方法で？

フィールド名と一致するドロップダウンを見つけて値を返す方法はありますか？ちょうどそれは非常にVueもののようには見えません。あなたはthis.$set

試みでオブジェクトに新しいキーを設定していないbecuase

var app = new Vue({ 
 
\t el: '#example', 
 
\t data: { 
 
\t \t selectors: [ 
 
\t \t \t { 
 
\t \t \t \t name: 'make', 
 
\t \t \t \t options: ['audi','bmw'] 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t name: 'fuel', 
 
\t \t \t \t options: ['petrol','diesel'] 
 
\t \t \t } 
 
\t \t ], 
 
\t \t selected: {} 
 
\t } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script> 
 

 
<div id="example"> 
 

 
<template v-for="selector in selectors"> 
 
    <select v-model="selected[ selector.name ]"> 
 
    <option v-for="option in selector.options">{{option}}</option> 
 
    </select> 
 
</template> 
 
    
 
<p> 
 
    {{selected.make}} 
 
    <br /> 
 
    {{selected.fuel}} 
 
</p> 
 
    
 
</div>

Answer 1

それはおそらくです： - Vue.setの別名 -

this.$set(this.selected, 'make', 'audi') 

がthis.$setを使用しません。平均的なVueは、新しいキーを反応的なものに設定せず、順番に見ることもないそれへの更新は、ドキュメント：https://vuejs.org/v2/api/#vm-set

var app = new Vue({ 
 
    el: '#example', 
 
    data: { 
 
     selectors: [{ 
 
      name: 'make', 
 
      options: ['audi', 'bmw'] 
 
     }, { 
 
      name: 'fuel', 
 
      options: ['petrol', 'diesel'] 
 
     }], 
 
     selected: null, 
 
    }, 
 
    created() { 
 
     // this would happen following your ajax request - but as an example this should suffice 
 
     this.selected = {} 
 
     this.selectors 
 
      .forEach((selector) => { 
 

 
       this.$set(this.selected, selector.name, '') 
 

 
      }) 
 

 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script> 
 
<div id="example"> 
 

 
    <div v-if="selected"> 
 

 
     <select v-model="selected[selector.name]" v-for="selector in selectors"> 
 
      <option :value="option" v-for="option in selector.options"> 
 
       {{option}} 
 
      </option> 
 
     </select> 
 

 
     <p>make: {{selected.make}}<p> 
 
     
 
     <p>fuel: {{selected.fuel}}</p> 
 
     
 
     <pre>{{ selected }}</pre> 
 

 
    </div> 
 

 
</div>