1

我在我的项目中使用了 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文档并且无法找到限制输入长度的方法。

感谢您提前提供任何帮助。

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

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

1 回答 1

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"]
   }
于 2019-05-29T14:54:09.470 回答