[Vuejs]-Using Vue.js to loop through with v-for adding 1 each time inline

by

1👍

✅

From the way I’m understanding the reading you need to get an indexed value from the original v-for to pass into the second.

try something like this

  <div v-for="(question, item) in questions.questions">
    {{question.question}}
    <div v-if="grouped_answers">
      <div v-for="a in grouped_answers[item].answers">
        {{a.id}}
      </div>
    </div>
  </div>

The second parameter in the v-for is the index/key passed by the loop.

👤Justin MacArthur

1👍

I would try to do the following (pseudo code as I’m not sure where item is coming from):

<div v-for="question in questions.questions">
   {{question.question}}
    <div v-if="grouped_answers">
      <div v-for="a in grouped_answers[item].answers">
        {{a.id}}
      </div>
    </div>
   <div v-text="incrementItem(item)"></div>
</div>

In Methods Block

methods: {
  ...
  incrementItem: function(item) {return item + 1}
}

Basically something like this where you’re calling to a method in your component to do the heavy lifting.

👤iamjpg

0👍

try to add index 

<div v-for="question in questions.questions">
   {{question.question}}
    <div v-if="grouped_answers">
  <div v-for="a in grouped_answers[item].answers">
    {{a.id}}
  </div>
</div>
   <div v-text="item.index"></div>
 </div>

if you can get index of element you dont need to write incrementor method,
but if you want, do like this:
…
data:{
number:0
}
….

methods: {

 incrementItem: function() {
    number +=1
    return number
}
}
👤Dmitry Yudin

Leave a comment