Vuejsデータを選択する要素に、反応しないajaxリクエストからデータを渡す

Question

次のコードでajaxの応答に応じてオプション要素を設定する動的選択入力をしようとしています。データがハードコーディングされている場合はすべてうまく働いていますが、応答性に基づいてオプションのダイナミックを作成しようとすると、反応性が得られません。要するに

のは、私は、オブジェクトを持っているとしましょう{Fooの「バー」、Loremの：「イプサム」}私は関数を使ってデータを動的に作成したいとき、私の問題がある

<select> 
    <option value="Foo">Bar</option> 
    <option value="Lorem">Ipsum</option> 
</select> 

取得私は今でも同じオプションを手に入れています{Enet： 'Dolor'、Magna： 'Aliqua'、mollit： 'Anim'}もっと良いアプローチがありますか？または私は何かが欠けている。オブジェクトを移入する責任

機能：

$.get('/registrar/levels', function (data) { 
    for (const datum of data) { 
    addModal.levelFields[datum.name] = datum.id; 
    } 
}); 

コンポーネント：

Vue.component("modal-add-form", { 
props: { 
    formName: String, 
    formType: [String, Number], 
    options: Object, 
}, 
template: `<div class="form-group" v-if="formType !== 'select'"> 
       <label :for="formName" v-text="formName"></label> 
       <input :type="formType" class="form-control" :name="formName" :id="formName" value="" :placeholder="formName"> 
      </div> 

      <div v-else> 
       <select :name="formName" class="form-control"> 
        <option v-for="(value, name) in options" :value="value" v-text="name"></option> 
       </select> 
      </div>` 

}); 

Answer 1

Vueのは、プロパティの追加と再レンダリングビューを検出できないため、直接データ値を再割り当てするべきではありません。あなたがコールバックで `addModal.levelFields`のプロパティを設定している

$.get('/registrar/levels', (data) => { 
    for (const datum of data) { 
    this.$set(this.addModal.levelFields, datum.name, datum.id) 
    // addModal.levelFields[datum.name] = datum.id; 
    } 
});