将vuejs与vuelidate和vuetify自动完成一起使用

时间:2020-05-20 15:36:15

标签: vue.js vuetify.js vuelidate

我正在尝试将vuelidate与v-autocomplete一起使用。

我的问题是“错误”数组因错误而完成,但是没有显示在屏幕上。 标签变为红色,但未显示错误消息。

如果我将v-text-field与其他验证一起使用,它会在下面显示红色错误。

我想对v-autocomplete做同样的事情。有没有办法显示v-autocomplete的验证错误?

这是我的代码:

<v-col cols="12" md="5">
                  <v-autocomplete
                    v-model="convenio"
                    :loading="loading"
                    :items="convenios"
                    :search-input.sync="searchConv"
                    item-text="nome"
                    item-value="id"
                    cache-items
                    flat
                    clearable
                    hide-no-data
                    hide-details
                    label="Convênio"
                    return-object
                    required
                    :error-messages="convErrors"
                    @blur="$v.convenio.$touch()"
                    @change="$v.convenio.$touch()"
                  ></v-autocomplete>
</v-col>

validations: {
    convenio: { required },
}
},
  computed: {
    convErrors() {
      const errors = [];
      if (!this.$v.convenio.$dirty) return errors;
      !this.$v.convenio.required && errors.push("Convênio é obrigtório");
      console.log(errors);
      return errors;
    },
  }

0 个答案:

没有答案