[英]MaxLength for bootstrap-vue input number Vue.js
I try to implement a maxLength
for an input from bootstrap-vue
, but from what I read from their documentation they don't support max.我尝试为
bootstrap-vue
的输入实现maxLength
,但是从我从他们的文档中读到的内容,他们不支持 max. If I remove type="number"
, it works , but is not a number anymore.如果我删除
type="number"
,它可以工作,但不再是数字。
<b-form-input
size="sm"
v-model="register_volume_first"
type="number"
maxlength=4
placeholder="1902"
></b-form-input>
Try to use formatter
prop as follows:尝试使用
formatter
prop 如下:
<template>
<div>
<b-form-input size="sm" v-model="volume" type="number" :formatter="formatYear" placeholder="1902"></b-form-input>
<div class="mt-2">Value: {{ volume }}</div>
</div>
</template>
<script>
export default {
data() {
return {
volume: '4'
}
},
methods:{
formatYear(e){
return String(e).substring(0,4);
}
}
}
</script>
maxLength only refers for text types, i tried to do a test to see if min & max are supported and it seems so, please take a look: maxLength 仅适用于文本类型,我尝试进行测试以查看是否支持 min 和 max,似乎是这样,请看一下:
new Vue({ el: '#app', methods: { onSubmit(evt) { evt.preventDefault() console.log(evt) } } })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script> <div id="app"> <b-form @submit="onSubmit"> <b-form-input type="number" max="20" min="10"><min="10" required></b-form-input> <b-button type="submit" variant="primary">Submit</b-button> </b-form> </div>
Keep in mind that the check for min & max is done when the form is submitted, with the required parameter of course.请记住,提交表单时会检查 min 和 max,当然还有所需的参数。
EDIT : added form & submit to the snippet编辑:添加表单并提交到代码段
EDIT 2: Without form submit编辑 2:没有表单提交
new Vue({ el: '#app', methods: { onSubmit(evt) { evt.preventDefault() console.log(evt) } }, data() { return{ inputValue: 15 } }, watch: { inputValue(val){ if(val < 10) this.inputValue = 10; else if(val > 20) this.inputValue = 20; } } })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script> <div id="app"> <b-form-input v-model="inputValue" type="number" max="20" min="10" required></b-form-input> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.