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" 不是通用解决方案（当需求不再是数字的情况）