Question

我正在使用带有表单的VueJS，而且我在动态添加输入字段时遇到了麻烦。

表单以单个输入字段开头，有人可以输入一个数字，沿着以下行：

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

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

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

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

Answer 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

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

1 个答案: