Questions tagged [v-for]

V-for is a directive within Vue.js which iterates over items in a list.

V-for is a vue.js directive which iterates over items in a list. According to the Vue.js documentation, v-for requires a special syntax such as "item in items" and later allows to use the referred item within the v-for scope. It is similar to a for-each loop in other languages.

vue.js documentation of v-for.

783 questions

265

votes

15 answers

Vue Js - Loop via v-for X times (in a range)

How can I repeat a loop via v-for X (e.g. 10) times?

{{ item.name }} - {{ item.price }}

The documentation shows:

javascript vue.js vuejs2 v-for
asked Jun 18 '17 at 17:05
MikeCaine
- 3,381
- 2
- 11
- 10

votes

7 answers

Vue - check if you are on the last prop of a v-for loop

If I have the following data property: person: {name: 'Joe', age: 35, department: 'IT'} And wanted to loop through and output it as follows: name: Joe, age: 35, department: IT So far I have: {{key}}: {{val}},…

vue.js v-for

asked Mar 11 '17 at 20:13

Mankind1023

7,198
16
56
86

votes

8 answers

v-for and v-if not working together in vue.js

A form is used to submit text and two options which tell vue which column to display the text in. When the col2 radio button is checked the submitted text should display in column 2. This is not happening, on column 1 text is displaying. I have two…

vue.js radio-button v-for

asked Feb 22 '18 at 17:21

Shane G

3,129
10
43
85

votes

3 answers

Start range in v-for="n in 10" from zero

I want to start the range from 0 instead of 1 in v-for="n in 10" which results in 1 2 3 .... 10 Is there a way to do it in Vuejs?

javascript vue.js vuejs2 v-for

asked Aug 03 '17 at 07:50

Pritam Bohra

3,912
8
41
72

votes

4 answers

vue.js v-for on two table rows

Vue 2, no webpack. I want to render two trs at a time, for main and detail expandable row. This is what I'm trying to achieve:

…

vue.js html-table rows v-for

asked Feb 27 '18 at 15:56

user3599803

6,435
17
69
130

votes

3 answers

Why not always use the index as the key in a vue.js for loop?

I have used vue.js for a couple of projects and I have been using the index as the key in the for loops

...and have started to wonder if there are problems with that since examples usually use…

javascript indexing vue.js key v-for

asked Jun 13 '17 at 21:01

getsetbro

1,798
1
22
33

votes

6 answers

Skip null items and null children in Vue v-for

I have a nested for ... in loop in Vue.js. What I'm trying to do is to skip elements if the value of the element is null. Here is the Vue template code: