javascript - vue 受限组件?
本文介绍了javascript - vue 受限组件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
最近从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"
不是通用解决方案(当需求不再是数字的情况)
解决方案
不要在 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?...
这篇关于javascript - vue 受限组件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文