H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue实现组件,v-model绑定的属性修改后,{{}}绑定显示正确,输入框显示错误

写了一个自己计算的组件,已知条件为单价,输入金额,自动计算数量;输入数量,自动计算单价,但是金额和数量都要保留2位小数,我通过 replace 来实现。

图片描述

代码如下:

<template>
    <div>
        汇率:<span>{{ rate }}</span><br /><br />
        总价:<input type="text" v-model="total">{{ total }}<br /><br />
        数量:<input type="text" v-model="amount">{{ amount }}<br /><br />
    </div>
</template>
<script>
export default {
    name: 'demo',
    data() {
        return {
            rate: 0.5,
            total_: '',
            amount_: ''
        }
    },
    methods: {
        autonumeric(str) {
            if (str == undefined) {
                return ''
            }
            str = str.toString();
            str = str.replace(/^(\-)*(\d+)\.(\d{0,2}).*$/, '$1$2.$3');
            return str;
        }
    },
    computed: {
        total: {
            get() {
                return this.total_
            },
            set(_val) {
                this.total_ = this.autonumeric(_val)
                this.amount_ = this.autonumeric(this.total_ / this.rate)
            }
        },
        amount: {
            get() {
                return this.amount_
            },
            set(_val) {
                this.amount_ = this.autonumeric(_val)
                this.total_ = this.autonumeric(this.amount_ * this.rate)
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
div{
    width 300px
    margin-left auto
    margin-right auto
    margin-top 100px
    margin-left 100px
}
input{
    border 1px solid #333
}
</style>

回答:

补充楼上
为什么说值没有更改,首先得理解v-model语法糖,上诉代码v-model等价于

 总价:<input type="text"  :value="total" @input="total = $event.target.value">{{ total }}<br /><br />

input事件触发set代理_val=48.333的时候,当前this.total_=48.33,之后执行this.total_ = this.autonumeric(this.amount_ * this.rate)//48.33,值没有更改,不触发更新。此后重新触发input流程重复上诉过程。

    this.total_ = _val;
    this.$nextTick(()=>{
          this.total_ = this.autonumeric(_val)
          this.amount_ = this.autonumeric(this.total_ / this.rate)
    })

回答:

解决方案:

set(_val) {
      this.amount_ = this.autonumeric(_val)
      this.total_ = this.autonumeric(this.amount_ * this.rate)
      this.$forceUpdate()
}

原因:
当你在输入框输入 46.33, 46.333, 46.3333 时, this.total_ 和 this.amount_ 的值都是没有变化的, 所以 vue 不会触发渲染, 这导致了 input 的值得不到矫正.

本文地址:H5W3 » vue实现组件,v-model绑定的属性修改后,{{}}绑定显示正确,输入框显示错误

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址