用於 bootstrap-vue 輸入編號 Vue.js 的 MaxLength

Question

我嘗試為bootstrap-vue的輸入實現maxLength ，但是從我從他們的文檔中讀到的內容，他們不支持 max. 如果我刪除type="number" ，它可以工作，但不再是數字。

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

Answer 1

嘗試使用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>

Answer 2

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>

請記住，提交表單時會檢查 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>