[Vuejs]-How can we stop vuetify 3 v-combobox from adding new items if the validation checks fail?

by

0👍

✅

Validation is used to show error messages to the user and prevent the form from being submitted. But if you remove invalid values immediately, there is no error message and the values are always going to be valid.

So instead of validation, you can just filter the values coming out of the component. Just replace the v-model with the underlying :modelValue and @update:modelValue and pipe the values through a filter:

<v-combobox
  :model-value="values"
  @update:model-value="values = filterInvalid($event)"
  ...
/>

You can also use the filter on the input of :modelValue to filter any invalid values coming in, depending on if there are preset values and how to deal with them if they are invalid.

Here it is in a snippet:

const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = {
  setup(){
    return {
      values: ref([12, '12n','n']),
      filterInvalid: (inputValues) => inputValues.filter(value => typeof value === 'string' && isNaN(value[0]))
    }
  }

}
createApp(app).use(vuetify).mount('#app')
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main class="pa-8">
    
      <v-combobox
        :model-value="filterInvalid(values)"
        @update:model-value="values = filterInvalid($event)"
        multiple
        chips
        closable-chips
        clearable
        variant="outlined"
      ></v-combobox>
      
      <div>Values: {{values}}</div>
      
      </v-main>
  </v-app>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>

Note however that removing values automatically can feel like a bug to users. You might be better off with the validation approach after all.

Leave a comment