<template>
<div class="container">
<div v-for="(item, index) in arr1" :key="index" >
<el-button type="primary" @click="addArr"><span>添加</span></el-button>
<el-button type="primary" @click="adddata"><span>添加数据</span></el-button>
<el-table border :data="item.arr2" style="width: 400px;">
<el-table-column label="input">
<template slot-scope="scope">
<el-input class="operate-input" v-model="scope.row.input" />
</template>
</el-table-column>
<el-table-column label="是否默认已选" width="182">
<template slot-scope="scope">
<el-radio-group v-model="scope.row.select">
<el-radio :label="0">否</el-radio>
<el-radio :label="1">是</el-radio>
</el-radio-group>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
arr1: [{arr2: []}]
}
},
watch: {
arr1: (e) => {
e.forEach(value => {
value.arr2.forEach(item => {
item.input = '2'
item.select = 1
})
})
}
},
methods: {
addArr () {
this.arr1.push({arr2: []})
},
adddata () {
let data = {
value: 1,
date: '2018-8-8'
}
this.arr1.forEach(item => {
item.arr2.push(data)
})
this.arr1 = Array.from(this.arr1)
}
}
}
</script>
<style scoped>
</style>
1
caviare 2019-02-22 10:18:21 +08:00
你把 arr1 的 watch 删掉
|
2
wake1bear 2019-02-22 10:20:56 +08:00
楼主把 watch 去掉试试看,讲道理 watch 只是会浅监听,在改变 input 或者 radio 的时候不会触发到,但我试了试把 watch 去掉确实没问题了,adddata 可以这样写
```javascrpit adddata () { let data = { value: 1, date: '2018-8-8', input = '2', } this.arr1.forEach(item => { item.arr2.push(data) }) this.arr1 = Array.from(this.arr1) } ``` |
4
wake1bear 2019-02-22 10:22:32 +08:00
接上条,没敲完就发出去了
adddata () { let data = { value: 1, date: '2018-8-8', input = '2', select = 1 } this.arr1.forEach(item => { item.arr2.push(data) }) this.arr1 = Array.from(this.arr1) } 一样的效果 @wake1bear |
5
zzlit OP @wake1bear 对,这样写是的确可以的,但是我在我这边实际使用不行,所以我就想知道为什么在 watch 里面去赋值不能改变。。感谢回复!
|
7
wake1bear 2019-02-22 10:47:46 +08:00
@caviare watch 不去不行,这么写逻辑是有误的,arr1 的第一层或第二层改变的时候必然会触发 watch,那么 watch 里的函数就会把 arr1 里的 arr2 每个元素都重新赋值一遍。
|
8
caviare 2019-02-22 10:56:20 +08:00
是的会有这种问题 没考虑到 勿用
|
9
salinapper 2019-02-22 11:05:21 +08:00
正确答案是,adddata 里面需要改成
let data = { value: 1, date: '2018-8-8', input: '', select: 0 } 因为这里是给这个 data 进行 defineProperty 操作的地方。 这里没有 input、select 的话,你在 watch 里面动态添加的 input、select 属性是无法被 vue 监听的。 |
10
salinapper 2019-02-22 11:16:12 +08:00
同理,watch 里面改成
Vue.set(item, 'input', '2') Vue.set(item, 'select', 1) 也是可以的,不过不推荐。 |