부트스트랩-vue 입력 번호 Vue.js의 최대 길이

부트스트랩-vue 입력 번호 Vue.js의 최대 길이

I try to expective amaxLength의 의견을 말하자면.bootstrap-vue그러나 내가 그들의 문서에서 읽은 바로는 그들은 최대를 지원하지 않는다.제거하면type="number", 그것은 작동하지만, 더 이상 숫자가 아니다.

    <b-form-input
        size="sm"
        v-model="register_volume_first"
        type="number"
        maxlength=4
        placeholder="1902"
    ></b-form-input>

다음과 같이 받침대를 사용해 보십시오.

<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는 텍스트 유형만 나타내며, 최소 & 최대가 지원되는지 테스트하려고 했는데, 그런 것 같으니 다음 사항을 확인하십시오.

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>

min & max 확인은 양식을 제출할 때 필요한 파라미터를 사용하여 수행된다는 점을 유념하십시오.

편집 : 서식 추가 및 코드 조각 제출

편집 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>

참조URL: https://stackoverflow.com/questions/60320696/maxlength-for-bootstrap-vue-input-number-vue-js