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

Question

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>

score 1 · Accepted Answer · answered May 29 '19 at 14:54

1

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

answered May 29 '19 at 14:54

Michael

4,538
5
31
58

Hi Michael, thanks for your response, I tried to do as you proposed but I was still able to type more than 45 characters, I edited my original post with the code modified. – GilbertoVGL May 29 '19 at 16:35
You should see an error message under the v-select when typing in more than 45 charachters. If you want to prevent the user from submitting the form then you can write a function which checks on submission and displays the error message. If you want to actually prevent the user from typing then you would need to write a function that basically watches the value of the v-select and if greater then 45 splices the 46th charachter. Hope this helps See here for an example I found: https://codepen.io/nelxaz/pen/xLemZB – Michael May 29 '19 at 19:41
Hi Michael, thx again for your answer. I'm really newbie on vuejs and javascript, I used the example you posted to experiment on how to do it and I managed to make a watch, see if the input length is greater than 10 and change it, but can you tip me on how to return the changes I made to the email field to the input field? The way I did doesn't effect the email input field at all. Here's the code pen example you provided with my changes: And thanks again – GilbertoVGL May 30 '19 at 16:43
So you need to make the rule reflect that to get the warning message put in same rule you have for "name" for email like this: ```emailRules: [ (v) => v && v.length <= 10 || 'Email must be less than 10 characters' //right now you have this: (v) => !!v || 'E-mail is required' ],``` – Michael May 30 '19 at 17:59
I think I didn't quite explained myself, I want to block the input after I reach 10 characters, is that possible? – GilbertoVGL May 30 '19 at 18:08
This code works like that (I am forcing a re render), the main issue was that while you correctly set the "email" value it was not rendering on the screen since the v-select does not rerender like that. also if this answer answers your question please mark that it does, thanks. https://codepen.io/anon/pen/arQOaP?editors=1111 – Michael May 30 '19 at 18:32

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

1 Answers1