Create input labels as length of v-model

Question

<div v-if="quesType === 'Çoktan Seçmeli'" class="row p-3 bg-dark text-light">
                <div class="col-4">
                  <select v-model="coktanSecmeli" class="form-select" name="" id="">
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                  </select>
                </div>
                <div v-for="item in coktanSecmeli">
                  <input type="text"/>
                </div>
              </div>

export default defineComponent({
  name: "SoruEkle",
  data() {
    const quesType = "";
    const coktanSecmeli = 0;
    return {
      quesType,
      coktanSecmeli,
    };
  },
  components: {
    ErrorMessage,
    Field,
    Form,
  },
  props: {
    widgetClasses: String,
  },
  methods: {},
});

我尝试过，但无法解决这个问题。我如何获取 v-model 的长度并使用该长度创建 html 标签作为该模型的长度。我也尝试过使用 array 和 v-html 但没有成功。

Answer 1

You must create a scope for coktanSecmeli. Let's define a computed property for this:

range() {
  return [...Array(this.coktanSecmeli).keys()];
}

Or use standard syntax:

range() {
  return Array.from(Array(this.coktanSecmeli).keys());
}

Then you should use this range for v-for:

<div v-for="key in range">
  <input type="text" :key="key"/>
</div>