vue 受限组件?

Keyves
  • 26

最近从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" 不是通用解决方案(当需求不再是数字的情况)

回复
阅读 3.3k
6 个回答
杨军军
  • 1.2k
✓ 已被采纳

不要在 mutation 立马对值进行过滤,要在 action 中对值进行过滤,并且把过滤后的值重新复制给input

changeAuthorId: function({ dispatch, state }, e){
  var value = e.target.value;
  e.target.value = value.replace(/\D/g, "");   
  dispatch('UPDATE_MESSAGE', e.target.value)
}

demo:

http://jsbin.com/farufa/edit?...

自己监听input事件,然后过滤掉吧

vue-validate吧,这是官方推荐的手段。

或者自己手写component

这个你的用计算属性实现吧

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏