How to use mask in a Combobox component with Vuetify?

Question

I need to use the mask property for validating the input before it can be added to the list of selected items.

Code:

new Vue({
  el: '#app',
  data: () => ({
    select: ''
  })
})

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-combobox
          v-model="select"
          label="Add 3 digit numbers"
          multiple
          chips
          mask="###"
        ></v-combobox>
      </v-container>
    </v-content>
  </v-app>
</div>

Problem:

Now the result is the mask limit the length of the input but not the format and then when an element is added Vue throws an error

the value is read as string and is sliced character by character.

Objective:

My goal is that the user only can add values that match the mask.

Thanks.

Here is a Codepen with the same code for better understanding https://codepen.io/pepas_24/pen/ejbJbd — Sebastian Gutierrez, Aug 17 '18 at 21:29
this might help https://stackoverflow.com/questions/47857673/how-to-use-mask-in-vuetify-text-field?rq=1 — gil, Aug 18 '18 at 03:59

score 0 · Answer 1 · answered Aug 18 '18 at 11:34

0

There is bug in Vuetify when using the mask attribute with multiple. Remove multiple and it will work.

answered Aug 18 '18 at 11:34

Steven Spungin

27,002
5
88
78

1

I tried this, but I need add multiple values so this don't help me :/ – Sebastian Gutierrez Aug 19 '18 at 19:53

How to use mask in a Combobox component with Vuetify?

1 Answers1