Is it possible for me to retrieve data in object using double v-for?

I am attempting to create a dynamic table using the following objects:

<tr v-for="product in allPosts" :key="product.id">
    <td v-for='(item, i) in checked' :key='`item${i}`'>{{product.item}}</td>
</tr>

In this scenario, I want to iterate through "product" from the first v-for loop and "item" from the second. I am trying to make it dynamic but unfortunately, it just results in an empty table. The array "allPosts" contains a large number of objects with data while "checked" holds an array of user-selected data. The elements in "item" correspond to keys in "product". Is it possible to achieve this dynamically?

AllPosts object (and 999 more lines like this):

[{"id":1,"post":"data","views":991,"comments":16,"likes":71}]

Checked array:

["post", "views", "comments", "likes"]

Answer №1

I think I understand what you're saying, and here's a possible solution:

<tr v-for="product in allPosts" :key="product.id">
    <td v-for='(item, i) in checked' :key='`item${i}`'>{{product[item]}}</td>
</tr>

One thing to note is the use of square brackets around item. This allows you to dynamically access the properties of the product object based on the value of the item variable.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring ways to display featured posts within specific category sections

I have 2 featured posts in 1 div id, one with a big class and the other with a small class. I want the big featured div to display posts based on categories. The code for the big featured post is shown below: <div class="main_feat"> ...

Graphic selectors: a new take on radio buttons

I've been attempting to make this work, but it's not functioning correctly. Below is the CSS code: .input_hidden { position: absolute; left: -9999px; } .selected { background-color: #000000; } #carte label { display: inline-bl ...

Tips for adjusting the language settings on a date picker

Is there a way to change the language from English to French when selecting a month? I believe I need to configure something in the core.module.ts. How can I achieve this? https://i.sstatic.net/Cpl08.png @NgModule({ declarations: [], imports: [ Co ...

Angular 6 - Share content easily on mobile devices (IOS, Android)

After reviewing this example detailing the use of Angular 5 for copying to clipboard, I encountered issues when trying to run it on the iPhone 6s. Is there a more comprehensive solution available? ...

What is the most effective method for updating the data in an Angular UI-Grid? Is it better to refresh the state or replace the data in $scope

I am using an Angular UI grid on my page. Whenever a user double clicks on a row, a modal pops up displaying the row data for updating. After a successful update, I need to display the latest data in the UI grid. To achieve this, I have two options: U ...

Is there a way to retrieve prName and prQty from the double array?

Is there a way to extract the values of prName and prQty from the 2D array? html <h1 v-for="item2 in productListAlaCarte" :key="item2"> <td>{{item2.prName}} {{item2.prQty}}</td> ...

Activate and deactivate form fields on Safari

I have been working on a script to enable and disable a field using Javascript. It functions correctly in Internet Explorer, but I am encountering issues with Safari. FIELD If "Yes" is selected, the free text field below should be enabled; otherwise, it s ...

Clear the local storage once the URL's view has been fully loaded

When retrieving details of a specific item by passing URL parameters stored in local storage, I encountered an issue. I need to delete the local storage variables after the view is loaded. However, what actually happens is that the local storage variable ...

Rotate arrows by 90 degrees instead of 180 degrees in Bootstrap 5 Accordion

I have customized a Bootstrap 5 Accordion according to the guide provided at https://getbootstrap.com/docs/5.0/components/accordion/. The default behavior rotates the arrows 180 degrees when an item is opened, changing from 'v' to '^'. ...

Trouble arises when incorporating a new feature onto a map with OpenLayers and Vue.js

I'm currently working on integrating a custom control into my map using OpenLayers with Vue.js. The Explore.vue component is responsible for creating the "map" (olmap) with OL, and I bind it to the child component LeftSideBar2.vue. However, when att ...

Menu selection that changes dynamically based on radio button selection

Currently, I have four radio buttons and my goal is to have a drop-down menu change based on the selected radio button. Should I pre-write all the drop-down options and display them accordingly, or would it be better to use ajax to fetch the values from th ...

Manipulate SVG elements by dragging them along the boundary of the path

Looking to achieve a specific functionality where I can drag and drop an element along the edges of a drawn path, rather than inside the path itself. To clarify, the goal is to move the red marked element on the black line bordering the path, allowing move ...

Adjust the height in proportion to the width

My goal is to adjust the height of the li's based on their width using JQuery. var width = $('li').width(); $('li').css('height', width + 'px'); However, I've encountered an issue as it doesn't resu ...

Update a variable in one component class using another component

My Hue class in a component contains a variable that I'm trying to modify: export default class Hue extends Component { state = { toggleState : false, toggleWhite : false } render(){...} ... } Within this component, I can chang ...

Adjust the Pivot Point of a GLTF Model in ThreeJS Manually

Hey there, I have a GLTF model that I successfully loaded into my ThreeJS scene by using the code snippet below: gltfLoader.load('assets/models/coin/scene.gltf', (gltf) => { const root = gltf.scene; gltf.scene.traverse(functio ...

Creating a Docker image for a Vue.js application

I'm facing an issue while trying to build a docker image for my Vue.js app. Currently, I have a Vue.js application and I am looking to create a docker image for it. Here is the content of my Dockerfile: FROM node:7.7.2-alpine WORKDIR /usr/app CO ...

Steps to assign a default value to the KeyboardTimePicker

I am utilizing the KeyboardTimePicker component from material ui to fetch a time of service such as "10:20". How can I make this time ("10:20") the default selection? When attempting to set this time, I am receiving an error stating " ...

Guide to passing JSON Data as a response in Vue.js version 2

Currently working on a Vue.js website that interacts with an API (route -> /api/**). However, I am struggling to figure out the process of sending JSON responses. Is there a similar method like res.json() in Vue.js as express.js has? ...

Angular has the ability to round numbers to the nearest integer using a pipe

How do we round a number to the nearest dollar or integer? For example, rounding 2729999.61 would result in 2730000. Is there a method in Angular template that can achieve this using the number pipe? Such as using | number or | number : '1.2-2' ...

Master the art of utilizing watchers and computed properties for intricate computations

Here's the scenario I'm dealing with: The user is able to enter Working hours and expenses, From these inputs, a calculation needs to be performed to determine the final value, with both vat and payrate being pre-defined constants. pay_amount ...