时间戳

首页 > 解决方案 > vue / vuetify 动态修改 v-text-field 属性

javascript - vue / vuetify 动态修改 v-text-field 属性

问题描述

我有几个领域：

<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;，我可以将字段置于错误状态，但仍然没有显示自定义错误消息

标签： javascriptvue.jsvuejs2vuetify.js

解决方案

首先，你不需要两者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>

推荐阅读