Vue.js - オブジェクトのプロパティ更新後にdomを更新する

Question

これは私を狂ってしまいます。 v-modelのDomはオブジェクトプロパティでは更新されませんが、Vue devtoolsは正しく更新されます。

これはVue.$setが必要であることがわかりました。これはv-forの繰り返しでは不可能と思われます。

<el-tab-pane v-for="(item, index) in onShelveForm.data" :key="item.id" :label="item.name"> 
    <div class="form-block" v-for="formItem in formStructure"> 
    <el-form-item 
    :prop="'data.' + index + '.' + formItem.id" 
    :label="formItem.name"> 

     <el-select 
     v-model="item[formItem.id]" 
     readonly="false"> 
     <el-option v-for="option in formItem.value.regex" 
      :label="option" 
      :value="option"></el-option> 
     </el-select> 

    ... 

オプションをクリックすると、セレクタに新しい値は表示されませんが、Vue devtoolは正しく反応します。

Vue.$setでこれを保存できる場合、どのように使用すればよいですか？v-for？

Answer 1

あなたはv-modelは、そのようなインスタンスが作成されたときにオブジェクトが存在しないなど、いくつかの可能性が、ある

が機能しない理由を参照する方が簡単な場合がありjsfiddleを提供することができます。

最も簡単な方法は、変更が発生したときに、@change='Vue.$foceUpdate()'を追加するだけで、強制的に更新を強制することですが、これ以上のハックと解決方法があります。 v-modelは正常に動作するはずです

<el-select 
    @change='Vue.$foceUpdate()' 
    v-model="item[formItem.id]" 
    readonly="false"> 
    <el-option v-for="option in formItem.value.regex" 
     :label="option" 
     :value="option"></el-option> 
</el-select>