Как ограничить длину ввода для элемента v-select? - PullRequest
Новая
       31

Как ограничить длину ввода для элемента v-select?

0 голосов
/ 29 мая 2019

Я использую функцию Vue-select в своем проекте, и в элементе v-select я хочу установить максимальную длину ввода (45 символов), но мне не удается это сделать.Мне удалось обработать это на серверной части, но я бы хотел запретить пользователю вводить больше, чем это разрешено.

Я попытался использовать свойство: maxlength = "45", но, похоже, оноабсолютно не влияет на длину вводаЯ хотел бы предотвратить это, так же как и этот код: https://codepen.io/CSWApps/pen/RQbvvp, Я искал документацию vue-select и не смог найти способ ограничить длину ввода.

Спасибо за любую помощьзаранее.

--------------- РЕДАКТИРОВАТЬ ----------------------

Я пытался использовать ответ Майкла, но я все еще мог набрать более 45 символов: 

  data() {
    return {
      maxlength: [v => v.length < 45 || "Sorry you have exceeded the max length of input"],
      lote: null,
      descarte: false,
      modelValidations: {
        requiredText: {
          required: true
        }
      }
    };
  }

      <div class="form-group">
        <div class="row">
          <div class="col-xs-8">
            <v-select taggable pushTags :rules="maxlength" v-model="lote" :options="lotes" @input="selecionarLote" >
              <span slot="no-options">Digite o nome de um lote e clique "Enter" para adicionar...</span>
            </v-select>
          </div>
          <div class="col-xs-4">
            <label class="control-label">Descarte</label>
            <p-switch v-model="descarte" type="primary" on-text="SIM" off-text="NÃO"></p-switch>
          </div>
        </div>
      </div>

1 Ответ

0 голосов
/ 29 мая 2019

Вам нужно предоставить один из реквизитов v-select, в этом вы можете использовать rules, например: 

<v-select taggable pushTags :rules="maxlength" v-model="lote" :options="lotes" @input="selecionarLote" >
                <span slot="no-options">Digite o nome de um lote e clique "Enter" para adicionar...</span>
            </v-select>

data(){
  return {
    maxlength: [v => v.length < 45 || "Sorry you have exceeded the max length of input"]
   }
...