CODEWITHSUNDEEP
vue.jsvuetify.js
Damon
Damon

Reputation: 4484

How can I bind to an array on my input using Vuetify/Vue.js?

I am using Vuetify.js on a project and everything is working very well. I am trying to add some custom error messages to my username input. For example, if a user trying to sign in is not found - I want to display that message.

I am able to pass a single value using :error-messages="errors.myMessage. Works great!

However, I'd like to set multiple values to that error message. For example, if:

Here is what I am doing that works:

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

According to the Vuetifyjs docs, I can pass a string or an array to :error-messages. Looking through the playground, I've tried this:

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

However, when the page renders, the username field is showing as invalid & no errors are showing. Ideally, I'd like to show different messages based on the error that is returned on the same input. An array make sense here...

enter image description here

To set the values, I am doing this based on my Axios response:

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

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

What is the correct way to show multiple message(s) for the same input? Thank you for any suggestions!

Upvotes: 1

Views: 636

Answers (1)

depperm
depperm

Reputation: 10746

I believe a single error message is the way to go. You can simply change it based on what the axios error is.

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

js:

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

Upvotes: 3

Related Questions