el-table下的v-model问题

Question

请教各位大佬为什么我在watch下面对arr2操作，然后选择框和输入框的值都无法改变？代码如下

<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>

---

查了一下是不是得用render函数来自己实现双向绑定？求指点~

Answer 1

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

1. 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如：vm.items.length = newLength

数组更新检测