如何使用Vuetify/Vue.js绑定到输入上的数组？

Question

我在一个项目中使用Vuetify.js，一切都很好。我试图将一些自定义错误消息添加到我的username输入中。例如，如果没有找到试图登录的用户，我希望显示该消息。

我能够使用:error-messages="errors.myMessage传递一个值。效果很好！

但是，我想为该错误消息设置多个值。例如，如果：

• 找不到用户。
• 用户没有权限。
• ?？?

下面是我正在做的工作：

...
type="email"
:error-messages="errors.userNotFoundException"
v-model="form.username"
...

根据Vuetifyjs文档，我可以将一个字符串或数组传递给:error-messages。穿过操场，我试过这样做：

...
type="email"
:error-messages="[errors.userNotFoundException, errors.notAuthorizedException]"
v-model="form.username"
...

但是，当页面呈现时，username字段显示为无效&没有显示错误。理想情况下，我希望根据相同输入返回的错误显示不同的消息。阵列在这里是有意义的。

​

​

为了设置值，我是根据我的Axios响应来做的：

data() {
    return {
        errors: {
            notAuthorizedException: '',
            userNotFoundException: '',
        },
},
...
.catch(error => {
    console.log("error: ", error);

    if (error.code === 'NotAuthorizedException') {
        this.errors.userNotFoundException = error.message;
    }
...

对同一输入显示多条消息的正确方法是什么？谢谢您的建议！

Answer 1

我相信只有一条错误信息是可行的。您可以简单地根据axios错误是什么来更改它。

type="email"
:error-messages="loginError"

联署材料：

data() {
    return {
      loginError: ''
    }
},
...
.catch(error => {
    console.log("error: ", error);
    this.loginError = error;
...