vue.jsv-forv-model

Creating input tag as v-model's length


<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.


Solution

  • 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>