VueJS將模型綁定到動態插入的表單元素

我在表單中使用VueJS，並且在動態添加輸入字段時遇到問題。VueJS將模型綁定到動態插入的表單元素

的形式開始於一個單一輸入域，其中有人能輸入數字，沿着線：

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

然後存在的頁面的另一部分，其應該顯示正在運行的總在行中輸入的金額。我正在使用計算屬性來完成此操作。

它可以正常工作，加載頁面時存在的所有字段。但是用戶可以點擊一個按鈕來克隆前一個字段。這個動態添加的字段不包含在計算中。我猜可能有兩個原因。首先，當元素被克隆時，它不再具有「v-model」屬性集（我可能是錯的;它不會在Chrome開發人員工具檢查中顯示出來）。其次，我不相信Vue知道元素，因爲它是在Vue實例創建後添加的。

有沒有很好的方法來處理這個問題？我敢肯定，我可以用jQuery強制它，但必須有一種「Vue方式」。

來源

2016-10-03 adamthehutt

你是如何「克隆」該領域的？ –

var newRow = lastRow.clone（）; 然後我調整新行的屬性，使ID屬性不同，等等。 – adamthehutt

我的建議是：

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

集lines爲您data一個數組，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

來源

2016-10-03 20:44:31

VueJS將模型綁定到動態插入的表單元素

回答

相關問題