vue 受限组件？

Question

最近从react转vue，尝试限制用户输入，比如输入内容只能为number，否则不改变值，在react里有受限组件所以很容易做到，但是vue里我尝试用react的方法貌似不行。。通过正则过滤，达到了authorId只能为纯数字的目的，但是在页面上input就算输入不是数字也会显示尝试用div输出authorId，是只输出符合要求的内容。问题：不用过滤器，怎么才能使input达到div的效果，只输出符合要求的内容(同步视图和数据)部分代码template    <template>        <input @input="changeAuthorId" :value="authorId">        <div>{{authorId}}</div>    </template>        <script>        export default {            store,            vuex: {                getters: {                    authorId: state => state.authorId                },                actions            }        }    </script>mutation   [types.CHANGE_AUTHORID] (state, value) {        if (!/^\d*$/.test(value))            return         state.authorId = value     }目前暂时的解决方案：type="number" 不是通用解决方案（当需求不再是数字的情况）