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

Question

如何在输入组中更改 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')
})

Answer 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>

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

How to access multiple variables in Vue v-for?

javascript

vue.js

vue-component

vuejs2

bootstrap-vue