CODEWITHSUNDEEP
vue.jsmultidimensional-array
cupcave
cupcave

Reputation: 55

How to use v-for with a Range and add additional input using push()

How to use the v-for with a range. My starting point would have a 5 value and this is my sample.

<td v-for="(n,index) in 5" :key="index">
    <input v-model="form.overAllScores[n]" class="quiz d-flex"/>
</td>

But my problem is, how can i add additional items using the push method with the same data name of overAllScores and this is 2D array

Here i inputted the scores. enter image description here

Upvotes: 0

Views: 57

Answers (1)

sugars
sugars

Reputation: 1493

new Vue({
  el: "#app",
  data: {
    count: 5,
    form:{
    overAllScores:['','','','','']
    }
  },
  methods: {
  	add(){
    	let len = this.form.overAllScores.length
    	this.$set(this.form.overAllScores, len, '')
      this.count++
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ol>
    <li v-for="(item,n) in count">
      <input v-model="form.overAllScores[n]">
    </li>
  </ol>
  <button @click="add">add</button>
  <div>
  {{JSON.stringify(form.overAllScores)}}
  </div>
</div>

Upvotes: 1

Related Questions