Vue之watch监听问题

殤丶发表于 2021-8-4 11:26

本帖最后由殤丶于 2021-8-4 15:05 编辑

有多个input框（a,b,c,d,e,f）,现在需要监听ainput框a的值，实时给input框d，（d是不可编辑填写，只显示a的值）
具体代码如下：

<div>
      <div><el-input v-model="tableData['3']['a']"></el-input></div>
      <div><el-input v-model="tableData['3']['b']"></el-input></div>
      <div><el-input v-model="tableData['3']['c']"></el-input></div>
</div>

<div>
      <div><el-input v-model="tableData['4']['d']" disabled></el-input></div>
      <div><el-input v-model="tableData['4']['e']"></el-input></div>
      <div><el-input v-model="tableData['4']['f']"></el-input></div>
</div>

data() {
return {
         tableData: {
                     3:[
                           {
                              a : value1,
                              b : value2,
                              c : value3,
                           }
                     ],
                     4:[
                           {
                              d : value4,
                              e : value5,
                              f : value6,
                           }
                     ]
               }
}
}

尝试了用watch直接监听a，但是监听不到。还望大佬指导一下。{:1_893:}

迈克杰克双 发表于 2021-8-4 11:50

既然d不用编辑那你直接把它跟a绑定一个对象就行了。

wxm96123 发表于 2021-8-4 13:38

没看到代码里有写监听啊，或者用@input方法，监听输入框值的改变

RootPotence 发表于 2021-8-4 13:56

赋值的时候指针变了吗？

泪鱼无梦 发表于 2021-8-4 14:22

为什么d的值跟a一样，还需要分别监听呢，直接也v-model=a不行吗，如果要用watch，不妨试试
tableData：{
deep:true,
handle(newVal) {

}
}

wangxiaohang 发表于 2021-8-4 14:54

<input v-model="tableData['3']['a']" @keyup="tableData['4']['d']=tableData['3']['a']"></input>

没必要用watch，watch在这儿监控不到的

惠民人家 发表于 2021-8-4 16:45

最简单就是双向绑带丫

sphsyv 发表于 2021-8-4 16:47

正在学习vue，觉得跟jquery完全是两个东西了

waf642311 发表于 2021-8-4 17:20

deep深度监听。

页: [1]

吾爱破解 - 52pojie.cn's Archiver

Vue之watch监听问题