Vue.js实现根据输入人数动态显示输入框组件

核心逻辑 #

绑定人数输入框到info.people，通过监听这个数值的变化，动态调整info.sneakers数组的长度，再用数组遍历渲染对应数量的鞋码输入框，实现输入框数量和人数的联动，同时同步鞋码数据到数组中。

具体代码实现 #

1. 组件脚本部分 #

<script>
export default {
  data() {
    return {
      info: {
        date: "2022-11-11T18:00",
        tracks: 1,
        people: 4,
        sneakers: []
      }
    };
  },
  mounted() {
    // 页面加载时，根据默认人数初始化鞋码数组
    this.syncSneakersArray();
  },
  methods: {
    syncSneakersArray() {
      const targetCount = this.info.people;
      const currentCount = this.info.sneakers.length;
      
      if (targetCount > currentCount) {
        // 人数增加，补充空元素到数组
        this.info.sneakers.push(...Array(targetCount - currentCount).fill(""));
      } else if (targetCount < currentCount) {
        // 人数减少，截断数组到目标长度
        this.info.sneakers.splice(targetCount);
      }
    }
  },
  watch: {
    // 监听人数变化，实时同步鞋码数组长度
    "info.people": {
      immediate: true,
      handler() {
        this.syncSneakersArray();
      }
    }
  }
};
</script>

2. 模板渲染部分 #

<template>
  <div class="booking-form">
    <!-- 人数输入区域 -->
    <div class="form-item">
      <label>预订人数：</label>
      <input 
        type="number" 
        v-model.number="info.people" 
        min="1" 
        placeholder="请输入人数"
      />
    </div>

    <!-- 动态生成的鞋码输入区域 -->
    <div 
      class="form-item" 
      v-for="(size, idx) in info.sneakers" 
      :key="idx"
    >
      <label>第 {{ idx + 1 }} 人鞋码：</label>
      <input 
        type="number" 
        v-model="info.sneakers[idx]" 
        min="30" 
        max="50" 
        placeholder="请输入鞋码"
      />
    </div>

    <!-- 可选：预览当前表单数据，用于调试 -->
    <div class="data-preview">
      <h4>当前表单数据：</h4>
      <pre>{{ info }}</pre>
    </div>
  </div>
</template>

关键细节说明 #

• 用v-model.number处理人数输入，确保获取到的是数值类型，避免字符串导致的数组长度计算错误
• 通过watch监听人数变化，调用syncSneakersArray方法动态调整数组长度，保证输入框数量和人数一致
• 鞋码输入框通过v-model绑定数组对应索引的元素，实现数据的双向同步
• 初始化时在mounted中调用同步方法，确保页面加载就显示对应数量的输入框

优化建议 #

• 可以给人数输入框添加输入验证，限制输入范围（比如最小1人，最大10人）
• 鞋码输入框可添加格式校验，提示用户输入合理的鞋码数值
• 若支持单独删除某个人的输入项，可添加删除按钮，点击时同时减少info.people并截断数组

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