VueJS 将模型绑定到动态插入的表单元素答案

【问题标题】：VueJS bind model to dynamically inserted form elementVueJS 将模型绑定到动态插入的表单元素
【发布时间】：2016-10-03 20:29:29
【问题描述】：

我将 VueJS 与表单一起使用，但在动态添加输入字段时遇到了问题。

表单以单个输入字段开头，人们可以在其中输入数字，如下所示：

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

然后页面的另一部分应该显示在行中输入的金额的运行总计。我正在使用计算属性来完成此操作。

它适用于页面加载时出现的所有字段。但是用户可以单击一个按钮来克隆前一个字段。这个动态添加的字段不会包含在计算中。我猜这可能有两个原因。首先是当元素被克隆时，它不再具有“v-model”属性集（我可能错了；它没有出现在 Chrome 开发者工具检查中）。其次，我不相信 Vue 知道该元素，因为它是在创建 Vue 实例之后添加的。

有没有好的方法来处理这个问题？我敢肯定，我可以用 jQuery 暴力破解它，但必须有一个“Vue 方式”。

【问题讨论】：

你是如何“克隆”这个字段的？
var newRow = lastRow.clone();然后我正在调整新行上的属性，以便 ID 属性不同，等等。
你好亚当。你有没有设法解决这个问题？目前停留在类似的问题上。也不想在 jquery 中蛮力..

标签： vue.js

【解决方案1】：

我的建议是：

<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

【讨论】：