Creating input tag as v-model's length

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: {},
});

i tried but i cant fix this. how can i get v-model's length and use this length to create html tag as this model's length. i also tried with array and v-html but it didn't worked.

Daniel · Accepted Answer · 2023-02-06T09:12:11.213

0

You have to create a range for coktanSecmeli. Let's define computed property for this:

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

or with a 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>

edited Feb 06 '23 at 09:12

answered Feb 05 '23 at 23:13

Daniel

2,621
2
18
34

Thank you so much but I'm really new in vue. ```return [...Array(this.coktanSecmeli).keys()];``` I don't understand this syntax. How can i write before Array(... – Utku ARSLAN Feb 06 '23 at 01:16
@UtkuARSLAN this is modern JS syntax, not vue itself. I've added a new example with the standard syntax. – Daniel Feb 06 '23 at 09:15

Creating input tag as v-model's length

1 Answers1