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则带有要显示的消息。

提交表单后，如果我想触发这些属性的任何字段上都有错误。

我该怎么做？例如，如何使用error属性将名称为“ code”的字段手动设置为错误状态？如何向其传递个性化消息？我是否需要在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属性。您已经有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>

vue / vuetify动态修改v文本字段属性

1 个答案: