v-model双向绑定失效问题

蒲公英想养花

image.png

问题描述

InputNumber组件v-model绑定的值在输入框中手动删除,在on-change事件中判断拿到的值,如果为null,赋值为1,但是该值发生了变化,InputNumber却并没有显示绑定的值(或者说有时候显示,有时候又不显示)

image.png

image.png

<InputNumber
      v-if="judge !== 7"
      v-model="judgeNum"
      :value="judgeNum"
      :min="0"
      @on-change="getNum"
    ></InputNumber>
getNum (num) {
      if (typeof num === 'number') {
        this.$emit('getData', this.judgelabel, this.judge, this.judgeNum, null)
      } else {
        this.$Message.info('这里有默认值哦~可以自行修改哦o(* ̄▽ ̄*)ブ')
        this.judgeNum = 1 //改变不生效
        this.$emit('getData', this.judgelabel, this.judge, this.judgeNum, null)
      }
    },

问题分析

可以发现on-change事件是在值发生改变的时候就触发的,而不是在输入框失焦之后触发,那我们可以想到在删除的那一刻触发了on-change事件,值变为null,这个时候又赋值为1,在极短时间内去连续的进行赋值操作,就可能导致出错,因为这个值在组件里面可能进行了一系列的动作,一个还没结束,又来了一个。所以最好是不要在一个值的改变事件里面再去改变它。

问题解决

setTimeout(() => {
    this.judgeNum = 1
}, 5000)

解决1:可以弄一个定时器,延迟第二次改变,0.5s是比较合适的。但其实也可能会受到浏览器响应速度的影响,所以有了解决2

<InputNumber
      v-if="judge !== 7"
      v-model="judgeNum"
      :value="judgeNum"
      :min="0"
      @on-blur="getNum"
></InputNumber>
// 注意这里的on-blur没有默认带参,所以通过this.judgeNum去拿到用户输入的值

解决2:不监听on-change事件,改成监听on-blur失焦事件,上一个问题确实解决了,但是会有新的问题,就是按上下键去改变值大小的时候没有监听到值得变化,因为没有触发失焦事件,这里也可以使用watch去监听,但是有更好的解决3

<!--父组件:-->
<cCompare :init_judge="init_judge" v-model="init_judgeNum" @getData="getJudge" />
<!--通过v-model去给子组件传值-->
// 子组件:
props: {
    value: { // 注意value不写默认的返回default,但是类型type还是要写
      type: Number
    }
},
computed: {
    judgeNum: {
      get () {
        return this.value
      },
      set (val) { // 只要该值被改变,就会触发set事件
        this.$emit('input', val) // 默认input事件
        this.$emit('getData', this.judgelabel, this.judge, this.judgeNum, null)
      }
    }
},
methods: {
    getNum () { // 这里面就不须再去抛新值了,都在set里面抛了
      if (typeof this.judgeNum === 'number') {
        // this.$emit('getData', this.judgelabel, this.judge, this.judgeNum, null)
      } else {
        this.$Message.info('这里有默认值哦~可以自行修改哦o(* ̄▽ ̄*)ブ')
        this.judgeNum = 1
        // this.$emit('getData', this.judgelabel, this.judge, this.judgeNum, null)
      }
    }
}

解决3:对于这种需要父组件改变子组件v-model值,又需要子组件值改变后同步到父组件,可以直接使用父子组件的双向绑定,在父组件通过v-model绑定该值,在子组件中用value接收,再用计算属性监听他的改变,改变之后再通过input事件传出(value和input是默认的组件v-model实现的语法糖),这样就实现了父子组件的数据双向绑定(强相关),因为原本父组件通过prop传入的值在子组件是不允许被改变的。

阅读 2k

只为愉悦送命

1 声望
3 粉丝
0 条评论
你知道吗?

只为愉悦送命

1 声望
3 粉丝
文章目录
宣传栏