ask everyone why I operate on arr2 under watch , and then the values of the selection box and input box cannot be changed? The code is as follows
<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>
check whether you need to use the render function to implement two-way binding yourself. Ask for advice ~