V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
zzlit
V2EX  ›  程序员

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

  •  
  •   zzlit · 2019-02-22 09:20:49 +08:00 · 3712 次点击
    这是一个创建于 2084 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <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
        1
    caviare  
       2019-02-22 10:18:21 +08:00
    你把 arr1 的 watch 删掉
    wake1bear
        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)
    }
    ```
    zzlit
        3
    zzlit  
    OP
       2019-02-22 10:21:40 +08:00
    @caviare 感谢回复!但是我需要给它一个初始值的并且去监听改变,这里只是写一个例子出来
    wake1bear
        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
    zzlit
        5
    zzlit  
    OP
       2019-02-22 10:25:15 +08:00
    @wake1bear 对,这样写是的确可以的,但是我在我这边实际使用不行,所以我就想知道为什么在 watch 里面去赋值不能改变。。感谢回复!
    caviare
        6
    caviare  
       2019-02-22 10:40:04 +08:00
    不要去掉 watch 然后加上 @wake1bear 修改过的 adddata 函数
    wake1bear
        7
    wake1bear  
       2019-02-22 10:47:46 +08:00
    @caviare watch 不去不行,这么写逻辑是有误的,arr1 的第一层或第二层改变的时候必然会触发 watch,那么 watch 里的函数就会把 arr1 里的 arr2 每个元素都重新赋值一遍。
    caviare
        8
    caviare  
       2019-02-22 10:56:20 +08:00
    是的会有这种问题 没考虑到 勿用
    salinapper
        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 监听的。
    salinapper
        10
    salinapper  
       2019-02-22 11:16:12 +08:00
    同理,watch 里面改成

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

    也是可以的,不过不推荐。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   6012 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 06:27 · PVG 14:27 · LAX 22:27 · JFK 01:27
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.