v-for Questions

9

Solved

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 ha...
Sextodecimo asked 22/2, 2018 at 17:21

4

Solved

I am using v-for to loop through an object, I need to access the key, the value, and the index. I've seen many ways to access two of them, that's easy, but can't find how to access all three. I fou...
Bodgie asked 10/1, 2021 at 15:37

0

Everywhere (vueschool, in the official docs, here, here, here etc.) it is recommend to use a unique key for each item in an array when using v-for in vue, to quote the official docs and another ans...
Bensky asked 6/7, 2023 at 9:19

6

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: <ul> <li v-for="item in items...
Messina asked 24/3, 2016 at 16:48

15

How can I repeat a loop via v-for X (e.g. 10) times? <!-- want to repeat this (e.g.) 10 times --> <ul> <li v-for="item in shoppingItems"> {{ item.name }} - {{ item.pr...
Perk asked 18/6, 2017 at 17:5

3

Solved

I'm trying Vue.js out but I am running into a problem. I am following a tutorial over at Laracasts but my v-for isn't working. HTML: <div id="root"> <ul> <li v-for="name in names...
Epoch asked 19/4, 2017 at 8:35

3

Solved

I have used vue.js for a couple of projects and I have been using the index as the key in the for loops <div v-for="(item, index) in items" :key="index"></div> ...and have started to...
Minded asked 13/6, 2017 at 21:1

4

Solved

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: <table> <tbody> <div v-for="item in items"> <...
Unutterable asked 27/2, 2018 at 15:56

3

I'm getting this error when i try to update my data fields in vuejs. data() { return { form : useForm({ imageFile : null, img_id : null, }), product_images : this.images, } }, here I'm upda...
Favian asked 6/6, 2021 at 17:46

2

Solved

A few years ago it was bad practice to do array = []; because if the array was referenced somewhere that reference wasn't updated or something like that. The correct way was supposed to be array.l...
Weddle asked 7/9, 2019 at 14:0

2

In vue I can duplicate one svg file several times like v-for="i in 5":key="i". How can I do it in React? <svg v-for="i in 5":key="i" width="36px&quot...
Poikilothermic asked 12/1, 2021 at 21:17

7

Solved

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: ...
Purpurin asked 11/3, 2017 at 20:13

2

Solved

I would like to avoid image value in below code.image is a key for property. How can I do that ? <tbody> <tr v-for="obj in data" :id="obj.id"> <td v-for="property in obj">{{pro...
Zechariah asked 18/12, 2017 at 2:45

2

Have some components rendered from a v-for loop. The refs are defined like this: :ref="'category_' + index" This is how these refs appears in console at: console.log(this.$refs): category_0: [Vue...
Reluctance asked 21/3, 2020 at 14:30

3

Solved

I'm working with laravel 5.5 and vuejs2 and lodash project. I want to skip first coming data in result like the image below. This is my vuejs2 code. new Vue({ el:'#users', data:{ message:'', ok:...
Flournoy asked 18/12, 2017 at 21:36

1

I am looping an array to generate dropdown as below <select class="form-control" v-model="compare_version" > <option v-for="(version, index) in allVersions" v-bind:value="index" v-bi...
Spiracle asked 10/1, 2020 at 10:50

3

Solved

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?
Handsaw asked 3/8, 2017 at 7:50

3

Solved

I can't figure out how to do a console.log to see what item is in the ul as its being passed. <div v-for="(item, index) in todos" :key="index"> <ul v-if="item" :load="console.log(item)"...
Opposable asked 7/1, 2019 at 15:57

3

Solved

I have a simple Vue filter that limits the length of an array to n elements. It works fine used like this: {{ array | limitArray(2) }} Now I'd like to use it inside a v-for loop, like this: <...
Jasen asked 5/12, 2018 at 19:40

3

When looping over an array (or object) with v-for on an inline element, vuejs does not render whitespace around said element. For example, I have this html: <div id="app"> Vue Rendering&lt...
Tingley asked 24/1, 2018 at 14:47

1

Solved

In my Nuxt app I have the following line that triggers the error mentioned in the title of this question: <template v-for="(project, index) in existingProjects"> <span :key="project.proj...
United asked 6/6, 2019 at 11:13

1

Solved

When using v-for, it is strongly recommended to include a key. Furthermore, as explained here, using the array index as your key doesn't really help. If your elements have an id property, then that...
Ginny asked 4/6, 2019 at 18:42

2

Solved

I have created two tabs, which I would like the class of active set on the first <li> by default. Then, when the second tab is selected, the .active class should pass to the second <li&g...
Yearlong asked 22/4, 2019 at 11:57

1

Solved

There are examples in the Vue docs using the key keyword use both :key= and v-bind:key= when defining the key in a v-for loop. Is one just syntactic sugar of the other, or do they do different thin...
Weary asked 11/3, 2019 at 15:22

1

Solved

I'd like to turn a div into input box on click, so that the post (which is rendered inside a loop) can be edited. Here is the button on the post: <a @click="setFocusEdit(index)" v-if="isAutho...
Megaera asked 22/1, 2019 at 10:48

© 2022 - 2024 — McMap. All rights reserved.