VueJs使用属性值获取数组值

Question

在一个表单中，我想要获取name属性值来查找错误消息，我手动将名称写入错误消息数组，它就可以工作了。

但我不希望每次都要写输入名称。

例如：

    <v-container>
         <v-row>
             <v-col cols="12">
                  <v-text-field v-model="label" name="label" :error-messages="errors[NAME_ATTRIBUTE_VALUE]" label="Label" @change="resetFormInputValidation" required></v-text-field>
              </v-col>
          </v-row>
          <v-row>
              <v-col cols="9">
                   <v-text-field v-model="mimeType" name="mime_type" :error-messages="errors['mime_type']" label="MIME Type" required></v-text-field>
              </v-col>

              <v-col cols="3">
                   <v-text-field v-model="extension" name="file_extension" :error-messages="errors['file_extension']" label="Extension" required></v-text-field>
               </v-col>
           </v-row>
    </v-container>

Answer 1

您不能以这种方式访问name属性。为了进一步解释我的注释，有一种方法是声明一个包含name属性值的数组，然后使用v-for遍历这些值。这使您可以访问动态名称属性。一个概念验证代码：

JS:

data: function() {
    return {
        names: ['name1', 'name2', 'name3']
    };
}

模板：

<v-container v-for="(name, i) in names" :key="i">
    <v-row>
        <v-col cols="12">
            <v-text-field v-model="label" :name="name" :error-messages="errors[name]" label="Label" @change="resetFormInputValidation" required></v-text-field>
        </v-col>
    </v-row>
    <!-- Other markup -->
</v-container>