javascript - 如何限制 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 的 Prop 之一，在此您可以像这样使用 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"]
   }