CODEWITHSUNDEEP
javascripthtmlnode.jsvue.jsvue-select
GilbertoVGL
GilbertoVGL

Reputation: 48

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

I use the Vue-select feature on my project, and in a v-select element I want to set up a maximum input length (45 characters), but I'm failing to do so. I managed to treat this on the back-end, but I'd like to prevent the user from inputing more than it's allowed.

I tried to use the property :maxlength="45" but it seems that it have absolutely no effect on the input length.

Here's what I have:

<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);
        }

As I said, I can handle the inputs that are above 45 characters, but I'd like to prevent it, just like this code do: https://codepen.io/CSWApps/pen/RQbvvp, I searched the vue-select documentation and wasn't able to find a way to limit the input length.

Thanks for any help in advance.

--------------- EDIT ----------------------

I tried to use Michael's answer, but I could still type more than 45 characters:

  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>

Upvotes: 1

Views: 3820

Answers (1)

Michael
Michael

Reputation: 5038

You need to provide it with one of the props of v-select, In this you can use rules like this:

<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"]
   }

Upvotes: 1

Related Questions