vue+element，求助大佬为什么这样写改变不了 input 和 radio 的值？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2101 天前的主题，其中的信息可能已经有所发展或是发生改变。

<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 条附言 · 2019-02-22 10:27:54 +08:00

更新！楼主这个问题已经解决了，在拿到后台的数据 res.data.data 那数组里面去添加默认值然后就可以修改了，只是有点不理解为什么我在 watch 里面去给这个数组赋值就修改不了，感谢回复的各位！

10 条回复 • 2019-02-22 11:16:12 +08:00

caviare

2019-02-22 10:18:21 +08:00

你把 arr1 的 watch 删掉

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)
}
```

zzlit

2019-02-22 10:21:40 +08:00

@caviare 感谢回复！但是我需要给它一个初始值的并且去监听改变，这里只是写一个例子出来

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

zzlit

2019-02-22 10:25:15 +08:00

@wake1bear 对，这样写是的确可以的，但是我在我这边实际使用不行，所以我就想知道为什么在 watch 里面去赋值不能改变。。感谢回复！

caviare

2019-02-22 10:40:04 +08:00

不要去掉 watch 然后加上 @wake1bear 修改过的 adddata 函数

wake1bear

2019-02-22 10:47:46 +08:00

@caviare watch 不去不行，这么写逻辑是有误的，arr1 的第一层或第二层改变的时候必然会触发 watch，那么 watch 里的函数就会把 arr1 里的 arr2 每个元素都重新赋值一遍。

caviare

2019-02-22 10:56:20 +08:00

是的会有这种问题没考虑到勿用

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 监听的。

salinapper

2019-02-22 11:16:12 +08:00

同理，watch 里面改成

Vue.set(item, 'input', '2')
Vue.set(item, 'select', 1)

也是可以的，不过不推荐。