如何限制 v-select 元素的输入长度？

Question

我在我的项目中使用了 Vue-select 功能，并且在 v-select 元素中我想设置最大输入长度（45 个字符），但我失败了这样做。我设法在后端处理这个问题，但我想防止用户输入超出允许的范围。

我尝试使用属性 :maxlength="45" 但它似乎对输入长度完全没有影响。

这是我拥有的：

<div class="form-group">
    <div class="row">
        <div class="col-xs-8">
            <v-select taggable pushTags :maxlength="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>

selecionarLote() {
    let vm = this;
    if (this.lotes.length) {
        if (!this.lote || !this.lote.label) return;

        if (this.lote.label.length > 45) {
            this.lote.label = this.lote.label.substring(0, 45);
        }

正如我所说，我可以处理超过 45 个字符的输入，但我想阻止它，就像这段代码一样：https://codepen.io/CSWApps/pen/RQbvvp，我搜索了 vue-select 文档，无法找到限制输入长度的方法。

提前感谢您的帮助。

----------------编辑---------------------

我尝试使用 Michael 的答案，但我仍然可以输入超过 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>

Answer 1

你需要给它提供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"]
   }

如何限制 v-select 元素的输入长度？

How to limit the input length on a v-select element?

javascript

html

node.js

vue.js

vue-select