vue / vuetify динамически изменять свойства v-текстового поля

Question

У меня есть пара полей:

<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>

В документах Vuetify я вижу, что есть пара свойств с именем error, которая вызывает состояние ошибки и error-messages с сообщениями, которые будут отображаться.

Когда форма отправлена, если есть какие-либо ошибки в любом из полей, я хочу вызвать эти свойства.

Как я могу это сделать? Например, как я могу вручную установить поле с именем «code» в состояние ошибки, используя свойство error? как я могу передать ему личное сообщение? Нужно ли специально создавать переменную в объекте data(), чтобы делать то, что я хочу? потому что если бы мне пришлось сделать это таким образом, это означало бы, что мне нужно создать ошибку и свойства сообщений об ошибках в объекте data для каждого поля в моей форме !? или это можно сделать, выбрав именно то поле, которое я хочу изменить, и каким-то образом обновить его свойства напрямую, без необходимости использования какой-либо переменной из модели?

Спасибо

---

Редактировать

Вот что я делаю:

<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>

Мой метод отправки следующий:

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];


            }
        }


    })
}

Установив this.formErrors[key].error = true; Я могуперевести поле в состояние ошибки, но пользовательское сообщение об ошибке по-прежнему не отображается

Answer 1

Прежде всего, вам не нужны оба error и error-messages проп. Если вы просто установите error-messages, поле ввода перейдет в состояние ошибки и появится сообщение

Нужно ли специально создавать переменную в объекте data () для того, чтобы сделатьЯ хочу сделать? потому что если бы мне пришлось сделать это таким образом, это означало бы, что мне нужно создать свойства ошибки и сообщения об ошибках в объекте данных для каждого поля в моей форме!

Да,вам нужно установить error-messages prop для каждого поля. У вас уже есть отдельные переменные для v-model и rules.

В идеале вы должны запустить цикл for для генерации полей ввода (показано ниже), но простой :error-messages="errorMessages.code" & :error-messages="errorMessages.name" также будет работать.

// 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>