uniapp App端解决input@input事件动态修改值不生效的问题

素颜马尾好姑娘i 2023-10-09 20:19 46阅读 0赞

## 解决方法 ##

### 1.延迟修改，利用setTimeout ###

### 2.异步修改，利用this.$[nextTick][] ###

<template>
        <view>
            <input v-modal="num" type="number" placeholder="请输入" :maxlength="3" @input="onInputOne" />
            <input v-modal="discount" type="number" placeholder="请输入" :maxlength="3" @input="onInputTwo" />
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    num: '',
                    discount: ''
                }
            },
            methods: {
                // 这里举例折扣大于0，但是小于10，默认最小值为0，最大值为9.9
                // 第一种方法使用延时，H5端有效，但App端不是很完美，其他端未测
                onInputOne() {
                    if (Number(this.num) < 0) {
                        this.num = '0'
                    } else if (Number(this.num) >= 10) {
                        setTimeout(() => {    // 设置延迟10ms有效，App端设置0实测无效
                            this.num = '9.9'
                        }, 10)
                    }
                },
     
                // 第二种方法使用异步修改，利用this.$nextTick实现
                onInputTwo() {
                    if (Number(this.num) < 0) {
                        this.num = '0'
                    } else if (Number(this.num) >= 10) {    // APP,H5端实测有用
                        this.$nextTick(() => {
                            this.num = '9.9'
                        })
                    }
                }
            }
        }
    </script>
    <style>
     
    </style>

[nextTick]: https://so.csdn.net/so/search?q=nextTick&spm=1001.2101.3001.7020