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

Question

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.

Yes thats basically what I would like, for each iteration create a number 0,1,2,3 that could slot in item to be used there. — James Parsons
– James Parsons, Commented Jan 24, 2017 at 20:56

Justin MacArthur · Accepted Answer · 2017-01-24 20:56:34Z

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.

answered Jan 24, 2017 at 20:56

Justin MacArthur

4,05024 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

iamjpg · Accepted Answer · 2017-01-24 20:40:46Z

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.

answered Jan 24, 2017 at 20:40

iamjpg

7,6281 gold badge19 silver badges18 bronze badges

2 Comments

James Parsons Over a year ago

Thanks for the reply. I does add 1 once but doesnt update the key in the second loop or continue to add one for each of the first loops. How would I do that?

James Parsons Over a year ago

Could I just get the key of the first loop each time?

Dmitry Yudin · Accepted Answer · 2017-01-24 20:59:14Z

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

answered Jan 24, 2017 at 20:59

Dmitry Yudin

9781 gold badge10 silver badges32 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related