如何根据v-model值的数量动态生成对应数量的input标签？

你的代码核心问题出在类型不匹配和初始值设置上，下面是具体的修复方案：

问题根源 #

1. 下拉框的选项值是字符串类型（如value="3"），但你在data中定义的coktanSecmeli是数字类型，v-model绑定后类型不匹配，导致循环生成input的逻辑异常。
2. coktanSecmeli初始值为0，不在下拉框的选项范围内，当quesType切换为'Çoktan Seçmeli'时，下拉框无默认选中项，coktanSecmeli仍为0，自然不会生成input。

修复后的代码 #

模板部分 #

<div v-if="quesType === 'Çoktan Seçmeli'" class="row p-3 bg-dark text-light">
  <div class="col-4 mb-3">
    <select v-model="coktanSecmeli" class="form-select">
      <!-- 用:value绑定数字类型值，和data中的变量类型匹配 -->
      <option :value="3">3</option>
      <option :value="4">4</option>
      <option :value="5">5</option>
      <option :value="6">6</option>
    </select>
  </div>
  <div class="col-12">
    <!-- 添加key避免Vue渲染复用问题，同时优化布局 -->
    <div v-for="(item, index) in coktanSecmeli" :key="index" class="mb-2">
      <input type="text" class="form-control" placeholder="请输入选项内容"/>
    </div>
  </div>
</div>

脚本部分 #

export default defineComponent({
  name: "SoruEkle",
  data() {
    return {
      quesType: "",
      // 初始值设为下拉框中的一个选项，确保初始状态有input生成
      coktanSecmeli: 3,
    };
  },
  components: {
    ErrorMessage,
    Field,
    Form,
  },
  props: {
    widgetClasses: String,
  },
  methods: {},
});

进阶优化：用数组管理选项内容 #

如果需要后续收集每个input的输入值，可以改用数组来管理选项，更贴合业务需求：

模板部分 #

<div v-if="quesType === 'Çoktan Seçmeli'" class="row p-3 bg-dark text-light">
  <div class="col-4 mb-3">
    <select v-model="optionCount" class="form-select">
      <option :value="3">3</option>
      <option :value="4">4</option>
      <option :value="5">5</option>
      <option :value="6">6</option>
    </select>
  </div>
  <div class="col-12">
    <div v-for="(option, index) in options" :key="index" class="mb-2">
      <input type="text" class="form-control" v-model="options[index]" placeholder="请输入选项内容"/>
    </div>
  </div>
</div>

脚本部分 #

export default defineComponent({
  name: "SoruEkle",
  data() {
    return {
      quesType: "",
      optionCount: 3,
      options: Array(3).fill(""), // 初始化对应数量的空选项
    };
  },
  // 监听选项数量变化，动态调整数组长度
  watch: {
    optionCount(newVal) {
      const diff = newVal - this.options.length;
      if (diff > 0) {
        this.options.push(...Array(diff).fill(""));
      } else {
        this.options.splice(newVal);
      }
    }
  },
  components: {
    ErrorMessage,
    Field,
    Form,
  },
  props: {
    widgetClasses: String,
  },
  methods: {},
});

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