javascript - vue / vuetify动态修改v文本字段属性(vue / vuetify dynamically modify v-text-field properties)

Question

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.

(在Vuetify的文档中，我看到有几个名为error属性，它们会触发错误状态以及显示error-messages 。)

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?

(例如，如何通过使用error属性将名称为“ code”的字段手动设置为错误状态？)

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?

(为了执行我想做的事情，是否需要在data()对象中专门创建一个变量？)

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

(因为如果必须这样做，那意味着我需要为表单中的每个字段在data对象中创建一个错误和一个错误消息属性！)

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

(谢谢)

  ask by MrCujo translate from so

Answer 1

First of all, you don't need both error and error-messages prop.

(首先，您不需要error和error-messages属性。)

If you just set error-messages , the input field will go in error state and the message will be shown

(如果仅设置error-messages ，则输入字段将进入错误状态，并且将显示该消息)

Do I need to specifically create a variable in the data() object in order to do what I wanna do?

(为了执行我想做的事情，是否需要在data（）对象中专门创建一个变量？)

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.

(是的，您需要为每个字段设置error-messages属性。)

You already have separate variables for v-model and rules .

(您已经具有用于v-model和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.

(理想情况下，您将运行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>