如何基于数组长度在Quasar中动态生成输入字段？

完全可行，Quasar作为Vue生态的UI组件库，天然支持Vue的列表渲染语法，轻松实现基于数组动态生成输入框的需求。以下是具体实现方式：

基础实现示例 #

模板部分 #

<template>
  <div class="q-pa-md">
    <!-- 遍历数组生成对应数量的Quasar输入框 -->
    <q-input
      v-for="(item, index) in sourceArray"
      :key="index"
      :label="`输入 ${item} 相关内容`"
      v-model="inputValues[index]"
      outlined
      class="q-mb-md"
    />
  </div>
</template>

脚本部分 #

<script setup>
import { ref } from 'vue'

// 原始数据源数组
const sourceArray = ref(["blue", "green", "yellow"])
// 存储每个输入框的值，初始可复用数组元素或设为空字符串
const inputValues = ref(sourceArray.value.map(item => item))
</script>

关键说明 #

• v-for遍历：通过Vue的v-for指令遍历目标数组，为每个元素生成一个q-input组件，:key需绑定唯一标识（这里用数组索引，若数组元素唯一也可直接用item作为key）。
• 双向绑定：用v-model绑定inputValues数组对应索引的元素，实现输入值的实时存储。
• 动态属性：可根据数组元素动态配置输入框的属性，比如示例中用:label生成个性化的输入提示。

进阶灵活配置 #

如果需要为每个输入框设置不同的属性（如占位符、类型、验证规则），可以将数据源改为对象数组：

<script setup>
import { ref } from 'vue'

const inputConfigs = ref([
  { label: "蓝色", placeholder: "请输入蓝色相关描述", value: "blue", type: "text" },
  { label: "绿色", placeholder: "请输入绿色相关描述", value: "green", type: "text" },
  { label: "黄色", placeholder: "请输入黄色相关描述", value: "yellow", type: "text" }
])
</script>

<template>
  <div class="q-pa-md">
    <q-input
      v-for="(config, index) in inputConfigs"
      :key="index"
      :label="config.label"
      :placeholder="config.placeholder"
      :type="config.type"
      v-model="config.value"
      outlined
      class="q-mb-md"
    />
  </div>
</template>

内容的提问来源于stack exchange，提问作者user20816596