如果验证检查失败,我们如何阻止vuetify 3v-combobox添加新项目?

rvpgvaaj  于 2023-06-24  发布在  Vue.js
关注(0)|答案(1)|浏览(129)

我已经尝试使用validation-onrules prop ,他们能够验证并给予我错误消息,但新的项目仍然被附加到状态。有没有什么方法可以改变这种行为,这样每次出现验证错误时,它就不会把项目附加到状态中?

ParentComponent.vue

...
 <MultiSelect
    v-model="form.tags"
    label="Select Tags"
    :items="tags"
    item-title="name"
    item-value="id"
  />
...

MultiselectComponent.vue

<template>
    <v-combobox 
        multiple 
    chips 
        closable-chips 
        clearable 
        :return-object="false"
        variant="outlined"
    />
</template>

我想要的
基本上,我不希望用户添加以数字开头或全部数字的标签
例如1232VueJs45689068yjkk等。

myzjeezk

myzjeezk1#

验证用于向用户显示错误消息并防止提交表单。但是如果立即删除无效值,则不会出现错误消息,并且这些值始终是有效的。
因此,您可以只过滤来自组件的值,而不是验证。只需将v-model替换为基础的:modelValue@update:modelValue,然后通过过滤器将这些值管道化:

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

您还可以使用:modelValue的输入上的过滤器来过滤任何输入的无效值,这取决于是否有预设值以及如何处理无效值。
下面是一个片段:

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>

但是请注意,自动删除值对用户来说可能是一个bug。毕竟,使用验证方法可能会更好。

相关问题