<div class="actions">
<button @click="add"></button>
</div>
add的方法一般是:
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 => {










