如何在 Vue v-for 中访问多个变量？

Posted 2023-02-23

【中文标题】如何在 Vue v-for 中访问多个变量？

【英文标题】：How to access multiple variables in Vue v-for?

【发布时间】：2021-04-04 15:33:02

【问题描述】：

如何在输入组中更改 bootstrap-vue 中的标签？我对输入字段没问题，我遇到的问题是尝试将标签更改为不同的标签？

<template>
  <b-modal id="Transfer" centered title="Transfer">
    <b-container fluid>
      <b-row class="my-1" v-for="type in types" :key="type">
        <b-col sm="3">
          <label :for="`type-$type`">Type <code> type </code>:</label>
        </b-col>
        <b-col sm="9">
          <b-form-input :id="`type-$type`" :type="type"></b-form-input>
        </b-col>
      </b-row>
    </b-container>
  </b-modal>
</template>

data: () => (
  labels: [].concat('test', 'test2', 'test3', 'test4', 'test5', 'test6', 'test7', 'test8', 'time', 'range', 'color'),
  types: [].concat('text', 'number', 'email', 'password', 'search', 'url', 'tel', 'date', 'time', 'range', 'color')
)

【参考方案1】：

在一个对象（或数组）中定义您的字段数据，然后您可以轻松访问v-for 中的所有数据。通过这种方式，您还可以存储数据本身的模型，否则必须是第三个数组：

new Vue(
  el: "#app",
  data: () => (
    fields: 
      test:  type: 'text', model: '' ,
      test2:  type: 'number', model: '' ,
      test3:  type: 'email', model: '' ,
      test4:  type: 'password', model: '' ,
      test5:  type: 'search', model: '' ,
      test6:  type: 'url', model: '' ,
      test7:  type: 'tel', model: '' ,
      test8:  type: 'date', model: '' ,
      test9:  type: 'time', model: '' ,
      test10:  type: 'range', model: '' ,
      test11:  type: 'color', model: '' 
    
  ) 
);

^{一个对象稍后通过名称查找字段会稍微容易一些，例如，在进行验证时。}

然后在您的v-for 中，您可以访问field.type 上的type 和label 作为循环索引。并给每个输入一个v-model="field.model"：

<b-modal id="Transfer" centered title="Transfer">
  <b-container fluid>
    <b-row class="my-1" v-for="(field, label) in fields" :key="label">
      <b-col sm="3">
        <label :for="`type-$field.type`">Type <code> field.type </code>  label :</label>
      </b-col>
      <b-col sm="9">
        <b-form-input :id="`type-$field.type`" v-model="field.model" :type="field.type"></b-form-input>
      </b-col>
    </b-row>
  </b-container>
</b-modal>