Questions tagged [v-for]
Vue.js contains a powerful directive called V-for that facilitates the iteration of elements in an array or object.
My setup involves utilizing Vue along with a multidimensional array structured like this: myArray = [[1,2,3],[1,2,3],[1,2,3]] To achieve the desired HTML layout shown below (ensuring that data-item counter increments correctly): <div class="row" data ...
I am trying to create a rating system using Vue.js and the v-for directive. Here is the code I have: <div class="rating-container"> <input type="radio" name="star" value="5" id="star-5"> <label class="star-radio" for="star-5">5&l ...
I have encountered a challenge with accessing specific data within an array that I am iterating over. The array is structured as follows, using Vue.js: companies: [ name: "company1" id: 1 type: "finance" additionalData: "{& ...
Purpose: 1.Rest API >>> by axios 2.Select category >>> by v-select 3.Show table >>> by v-data-table however, there is an issue with displaying the table so I am using v-for to show it instead. View what I have managed to displa ...
I'm a beginner when it comes to vueJs and I'm attempting to toggle the class "active" on a single element once it has been clicked. Currently, my code toggles all elements with the class material_icons. How can I modify it to toggle only the elem ...
Looking to loop through rows in a table using a range? Most examples show how to do this for a fixed value, like: <div> <span v-for="n in 10">{{ n }} </span> </di But what if you want to achieve this with a variable like below? &l ...
This is the setup I am currently using: HTML <question v-for="question in questions" v-bind:id="question.id" v-bind:title="question.title" v-bind:statement="question.statement" v-bind:interaction="question.interaction" @onchange-vg=" ...
I am facing an issue with my Vue components 'Parent' and 'Child'. Each child component has a checkbox with a :checked prop. In the Parent component, I iterate through an array of objects and pass props to the child. Although I can emit an event from the ch ...
I am encountering an issue where I want to display data dynamically from a database using a v-for loop. However, when I attempt to push new data into the array, they show correctly in a console.log() but do not reflect any changes in the template. I have ...
I am facing an issue with a child component that utilizes v-for. My goal is to allow the parent component to dictate how each item within the v-for loop is displayed by passing down a slot or similar mechanism. The challenge lies in the fact that the paren ...
When pulling data from a database and looping through it in the DOM using a "v-for" loop, I encountered an issue with Vuetify expansion panel components. The problem is that when a user clicks to open one expansion panel, it ends up opening all other panel ...
Utilizing a v-for loop over an array of objects in graphicState, the rows of a table are dynamically generated. My goal is to implement a column of radio buttons that, when checked, will set graphicState[index].selected to true. I came across this insight ...
Within my template, I have form-group components that are being iterated over based on the value of a select element (an integer). My goal is to access the values of these iterated v-models, but I am struggling to get it right. TEMPLATE <b-form-g ...
I am currently working on a project that involves an array of servers being displayed in a template using v-for. To receive dynamic data for each server, I have implemented the vue-nats library to subscribe them individually. methods: { subscribe(uuid) ...
One query I have is about accessing data stored in Vuex and using v-for to loop through a list of object keys. How can I retrieve the data using mapGetters within the v-for loop? I've attempted passing the key into curly braces in the v-for loop as sh ...
VueJS v-for is functioning properly: <tr v-for="request in requests"> <td>{{request.name}}</td> <td> .. etc .. </td> </tr> Now, I want to insert a legend row after every 25 or 50 records. Here's what I tri ...
UPDATE Here is a recreation of the issue I am facing I need to dynamically bind with the correct index, how can I achieve this? CLICK THE CODEPEN LINK ABOVE FOR THE OLD CODE CLICK THE CODEPEN LINK ABOVE FOR THE OLD CODE <template> <div> ...
Here's an example of a string: "Greetings Earthlings! I come in peace." Along with a set of words. ["Greetings", "Earthlings", "peace"] I want to automate the process of enclosing matching words within Vue components. For instance, it should look ...
I've developed an application where users can leave comments on each other's profile pages, but I'm encountering issues with displaying these comments. Despite using v-for, the output on the screen shows {{ comment.from }} and {{ content.from }}, instead o ...
I need to create components in a loop within my Vue app, but I want each component to have a unique id value like "board-1" based on the index of the loop. Just like how I did it with v-bind:key="component-${block._uid}". How can I make this happen? < ...
I needed to verify whether a specific property of an object matches the property of the next object in an array of objects while looping through using a v-for loop. Here's an example JSON object: [ { Date: '21-July-2017', ...}, { Date: '21-July-2017' ...
Here is a paragraph about the list of child components: <question-list-item v-for="(item, index) in questionListParsed" :key="item.id" :both-question="item" :class-id="classId" ...
I am struggling to fetch and display data from an API in my Vue.js application. Although the API seems to be functioning correctly when I check using console.log(), I am unable to populate the table with the retrieved data. Since I am new to Vue.js, I am u ...
I have a question regarding my code snippet below. The calculation of Ending Inventory involves adding the beginningInventory, newInventory, and totalSold values. How can I access the value property of endingInventory in order to update it? Any assistance ...
Why does Vue complain about undefined properties when I try nesting a <tr> inside a <tr> with a v-for binding on each? <table> <thead></thead> <tbody> <tr v-for="item in items"> <td>{{ item.nam ...
I'm currently using a template to show a list of components: <template> <v-container id="container"> <RaceItem v-for="(item, index) in items" :key="item + index" /> (...) Whenever I update the " ...
I'm struggling with the code snippet below: <template> <div> <div v-for="title in titles"> <h1>{{ title }}</h1> <a @click="showSub">Click Here</a> <div v-if=" ...
It seems like the issue lies in the timing rather than being related to asynchronous operations. I'm currently iterating through an object and displaying a list of items. One of the values requires calculation using a method. While the direct values on th ...
I'm working on creating multiple FAQ boxes using a list of objects containing questions and answers. However, I keep encountering the error message "Cannot read property 'question' of undefined." What could be causing this issue? Here's a snippet of my cod ...
Dealing with v-for Duplicate Keys Error Even though the list is returned successfully, there seems to be a problem when I update a user in the array by changing their role. An error about duplicate keys is triggered. The key is assigned using the user&apo ...
Struggling to code (complete newbie) using VueJS and facing a major roadblock. I have a list of orders and I need to sum the quantities of each item separately. The only way to access the items is through v-for. <tr> <td data-th="list"> < ...