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

Asked By: Anonymous

I am looking to loop through questions.questions each time adding on like you would but I guess I need to do this inline as I think wish to use the number created to update item as the key in the second loop.

      <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>
        {{item += 1}}
      </div>

item is already set in the data as 0 as everything else is working with that set 0 just obviously not pulling the rest of the data through.

Solution

Answered By: Anonymous

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.