CODEWITHSUNDEEP
javascriptvue.jsvuejs2vuetify.js
MrCujo
MrCujo

Reputation: 1323

vue / vuetify dynamically modify v-text-field properties

I've got a couple fields:

<v-row>
    <v-col cols="12" class="d-flex">
        <v-text-field clearable outlined required :rules="rules.codeRules" name="code" v-model="attribute.code" label="Code"></v-text-field>
    </v-col>
</v-row>
<v-row>
    <v-col cols="12" class="d-flex">
        <v-text-field clearable outlined required :rules="rules.nameRules" name="name" v-model="attribute.name" label="Name"></v-text-field>
    </v-col>
</v-row>

In Vuetify's documents I see there's a couple properties named error which triggers an error state and error-messages with messages to be displayed.

When the form's submitted, if there's any errors on any of the fields I want to trigger these properties.

How can I do that? For instance, how can I manually set the field with the name of "code" into an error state by using the error property? how can I pass a personalized message to it? Do I need to specifically create a variable in the data() object in order to do what I wanna do? because if I have to do it that way it'd mean that I need to create an error and an error-messages properties in the data object for each and every field in my form!? or it can do by selecting exactly the field that I want to modify and somehow update its properties directly without the need of any variable from the model?

Thanks

Edit

Here's what I'm doing:

<v-row>
    <v-col cols="12" class="d-flex">
        <v-text-field clearable outlined required :error="formErrors.code.error" :error-message="formErrors.code.errorMessages" :rules="rules.codeRules" name="code" v-model="attribute.code" label="Code"></v-text-field>
    </v-col>
</v-row>

My submit method is the following:

axios.post(postUrl, this.attribute, { Accept: "application/json" })
    .then(response => {

        if (response.data.success) {
            Event.fire('message', {
                type: 'success',
                message: 'Attribute successfully saved'
            });
            this.$router.push('/attributes/list')
        }
    })
    .catch(errors => {

        // eslint-disable-next-line no-console
        console.log(errors.response.data)

        const responseErrors = errors.response.data

        if (responseErrors) {
            // eslint-disable-next-line no-console
            console.log('here modafucka')
            //const self = this
            for (const key of Object.keys(responseErrors)) {
                // eslint-disable-next-line no-console
                console.log(responseErrors[key][0])
                this.formErrors[key].error = true;
                this.formErrors[key].errorMessages = responseErrors[key][0];


            }
        }


    })
}

By setting this.formErrors[key].error = true; I'm able to put the field in an error state, but still the customized error message is not being displayed

Upvotes: 2

Views: 6510

Answers (1)

Ankit Kante
Ankit Kante

Reputation: 2139

First of all, you don't need both error and error-messages prop. If you just set error-messages, the input field will go in error state and the message will be shown

Do I need to specifically create a variable in the data() object in order to do what I wanna do? because if I have to do it that way it'd mean that I need to create an error and an error-messages properties in the data object for each and every field in my form!

Yes, you'll need to set error-messages prop for each and every field. You already have separate variables for v-model and rules.

Ideally you would be running a for loop to generate the input fields(shown below), but a simple :error-messages="errorMessages.code" & :error-messages="errorMessages.name" will also work.

// Fields array
[
  {
    name: 'code',
    rules: [ // list of rules ],
    value: '' // Some value,
    errorMessages: [] // Could be list or string
  },
  {
    name: 'name',
    rules: [ // list of rules ],
    value: '' // Some value,
    errorMessages: [] // Could be list or string
  }
]

// Your form template
<v-row v-for="field in fields" :key="field.name">
    <v-col cols="12" class="d-flex">
        <v-text-field 
          clearable 
          outlined 
          required 
          :rules="field.rules" 
          :name="field.name" 
          v-model="field.value" 
          :label="field.name"
          :error-messages="field.errorMessages"
         >
         </v-text-field>
    </v-col>
</v-row>

Upvotes: 1

Related Questions