動的に挿入されたフォーム要素へのVueJSバインドモデル

Question

フォームでVueJSを使用していますが、動的に追加された入力フィールドに問題があります。

<input type="text" name="line[1]" v-model="line[1]">

はその後、実行中の合計を表示することになっているページの別の部分があります：

形の線に沿って、誰かが番号を入力することができ、単一の入力フィールドで始まります行に入力された金額の私はこれを達成するために計算されたプロパティを使用しています。

ページロード時に存在するすべてのフィールドで正常に動作します。しかし、ユーザーはボタンをクリックして前のフィールドを複製することができます。この動的に追加されたフィールドは、計算に含まれません。私はそれが2つの理由のためかもしれないと推測している。まず、要素がクローンされるまでに、「v-model」属性セットがなくなりました（私はこれについて間違っているかもしれませんが、Chromeデベロッパーツールの検査では表示されません）。第二に、私は、Vueインスタンスが作成された後に追加されて以来、Vueが要素について知っているとは思わない。

これを処理する良い方法はありますか？私はjQueryでそれを強制することができますが、確かですが、 "Vueの方法"が必要です。

Answer 1

私の提案は次のとおりです。あなたのdataで配列として

<input v-for="line in lines" v-model="line" name="line[]"> 

設定lines、そしてそれにpush新しい要素。

new Vue({ 
    data: { 
    lines: ['initial text'] 
    }, 
    methods: { 
    addLine: function() { 
     this.lines.push(this.lines[this.lines.length - 1]) 
    } 
    } 
}) 

---

あなたが「変化検出警告」の下にない場合にも確認すること。 、確認してください...

VueJS 1：

• オブジェクト：http://v1.vuejs.org/guide/reactivity.html#Change-Detection-Caveats
• アレイ：http://v1.vuejs.org/guide/list.html#Caveats

VueJS 2：

• オブジェクト：http://vuejs.org/guide/reactivity.html#Change-Detection-Caveats
• 配列：http://vuejs.org/guide/list.html#Caveats