methods: { add: function () { this.books.push({ lists: [{ type: 'input', defaultValue: 'tom', value: 'tom' }, { type: 'input', defaultValue: '123456', value: '123456' }, { type: 'textarea', defaultValue: '123456', value: '123456' }, { type: 'select', defaultValue: '0', value: '0', source: [{ value: '1', label: '男' }， { value: '1, label: '女' }] }] }) },
这里需要注意的是，如果这份模板的数据，你是通过在data属性中定义的字段去缓存的，那有可能遇到的是你通过添加操作之后的表单的值会，会随着其中的某个表单的值一起联动。
具体原因，猜测是这里的数据已经是变成响应式的了， 又或者你 通过实例化后的值去缓存这份模板数据，可能结果还是这样。
具体代码可能是这样的：
var vm = new Vue({ data: { books: [], cacheTemplate: null }, methods: { getForms: function (argument) { this.$http.post(url, paras).then(res => { // 此处缓存了这份模板数据，cacheTemplate中的数据已经变成响应式的了 this.cacheTemplate = res.body.data this.books.push(res.body.data) // 创建第一动态表单列表 // 或者你是这是定义的的, 此时data中没有cacheTemplate这个值， // 这样定义按理说是非响应式的，但实际情况并非如此，在项目中发现它还是会影响其他表单 vm.cacheTemplate = res.body.data this.books.push(res.body.data) // 创建第一动态表单列表 }, res => { }) }, add: function () { // 此处你会发现你新创建的表单的值会影响其他表单 // log出来this.cacheTemplate你会发现里面的值已经发生了变换 this.books.push(this.cacheTemplate) } } })
这里this.cacheTemplate的值为什么会发生变换，没有搞明白， 猜测原因可能是变成响应式了，vue中会实时监控跟踪，对vue原理理解好的小伙伴可以评论告诉我原因。
下面说下我的解决方法: 我不管你是不是响应式的，因为是对象，你才能监控到变换，那我把你变成字符串不就好了。
直接上代码：
var vm = new Vue({ data: { books: [], cacheTemplate: null }, methods: { getForms: function (argument) { this.$http.post(url, paras).then(res => { // 此处同样缓存了这份模板数据，不同的是把它变成了字符串 this.cacheTemplate = JOSN.stringify(res.body) this.books.push(res.body) // 创建第一动态表单列表 }, res => { }) }, add: function () { // 此处转化成json对象，你发现this.cacheTemplate中的值是没有变换的。 var cacheTemplate = JSON.parse(this.cacheTemplate) this.books.push(cacheTemplate) } } })
这样其他表单值变换的时候都不会影响到我这份模板的数据，问题解决了。