iview input组件无法使用watch？

Question

使用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的值输入非数字已经被替换掉了，但是输入框的值没有被更新，等于数据变成单向的了，不明白是怎么回事。

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

Answer 1

此 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>