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

iview input组件无法使用watch?

使用iview的input组件,无法使用watch

<Input type="text"  v-model.trim="account" size="large" placeholder="请输入手机号" :maxlength="11"></Input>

watch: {
    account: function() {
        this.account = this.account.replace(/[^\d]/g,'');
    }
},

不起作用,但是我换成普通的input就没问题

<input type="text" v-model.trim="account">

文档上也没其他说明,是我用法不对吗?

我打印了下值,发现是起作用的

watch: {
    account: function() {
            //console.log(this.account);
            this.account = this.account.replace(/[^\d]/g,'');
            console.log(this.account);
        }
    },

此时,this.account的值输入非数字已经被替换掉了,但是输入框的值没有被更新,等于数据变成单向的了,不明白是怎么回事。

初步判断问题的原因可能是 父子组件间的数据只能是单向的缘故。

回答:

v-model 非彼 v-model
先去 Vue 文档了解自定义组件的 v-model 用法后,然后看下面的示例:

<template>
    <Input :value="value" @input="handleInput" />
</template>
<script>
    export default {
        data () {
            return {
                value: ''
            }
        },
        methods: {
            handleInput (val) {
                this.value = val.replace(/[^\d]/g,'');
            }
        }
    }
</script>

本文地址:H5W3 » iview input组件无法使用watch?

评论 0

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