Vue.js获取所有v模型绑定

Question

使用Vue.js，您可以将表单输入绑定到属性：

https://vuejs.org/v2/guide/forms.html

我正在开发一个项目，我可以“动态”生成表单。这里的v模型绑定只是根据输入的名称设置的属性。

但问题是，我想知道如何正确获取这些v模型绑定。到目前为止，我所看到的是人们在他们的Vue实例上手动设置属性以进行绑定：

new Vue({
  el: '...',
  data: {
    checkedNames: []
  }
})

是否有可能以某种方式获取所有v-model绑定但不手动设置数据属性？

在创建具有变量和动态字段数的动态表单时，这将有很大帮助。

我想一个选项只是从输入中使用javascript检索名称属性，但我希望可能已经存在某些内容，因为v-model可能正在调用可能已在Vue实例中知道的setter。

从答案中重复了这个例子：

https://jsfiddle.net/yMv7y/2477/

Answer 1

根据official documentation：

  

可以使用Vue.set(object, key, value)方法将反应属性添加到嵌套对象。

这意味着您的首发data可以是：

{
  customForm: [],
  values: {}
}

我们假设customForm是一个字段对象数组，用于描述自定义表单中的一堆字段。它在开头是空的，因为你说你的表单将动态创建。

生成动态数据后，您需要做的就是将其分配给customForm并循环遍历它，以使用前面提到的Vue.set方法添加反应属性。

这是一个JSFiddle的例子。我正在使用this.$set，但这只是Vue.set的别名。