Utilizing variables to showcase a list nested within another

Within my code, I am trying to render two lists nested within each other, but I am unable to access the variable of the parent list inside the nested one. Can you help me identify where I might be making a mistake?

<v-card
        v-for="n in lengthI"
.
.
<v-card
        v-for="image in images.n"

This is how my 'images' object looks like:

images:{one:[{flex: 12, src:'https://i.ibb.co/mHNXycQ/Filler.png', title:'kuzey cephe'}, {flex: 6, src:'https://i.ibb.co/QYvByD3/cephe.png', title:'güney cephe'}, {flex: 6, src:'https://i.ibb.co/QYvByD3/cephe.png', title:'batı cephe'}], two:[{flex: 12, src:'https://i.ibb.co/mHNXycQ/Filler.png', title:'kuzey cephe'}, {flex: 6, src:'https://i.ibb.co/QYvByD3/cephe.png', title:'güney cephe'}, {flex: 6, src:'https://i.ibb.co/QYvByD3/cephe.png', title:'batı cephe'}], three:[{flex: 12, src:'https://i.ibb.co/mHNXycQ/Filler.png', title:'kuzey cephe'}, {flex: 6, src:'https://i.ibb.co/QYvByD3/cephe.png', title:'güney cephe'}, {flex: 6, src:'https://i.ibb.co/QYvByD3/cephe.png', title:'batı cephe'}]}
javascriptvue.jsfor-loopv-for

Answer №1

When nesting lists, it is important to ensure that variable names are unique and include a key attribute for each one:

<v-card v-for="(n, i) in items" :key="'item' + i">
  <v-card v-for="(image, k) in n.images" :key="'image' + k">

     // perform actions here

  </v-card>
</v-card>

I trust this explanation is beneficial.

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

Ways to delete the title from a box in orgChart

Is there a way to remove the title from the box and only show the content? I've searched extensively but haven't found a solution yet. I'm currently using orgChart: https://github.com/dabeng/OrgChart For example, the general manager box s ...

javascriptjqueryorgchart

Guide to configuring the overflow-y property for individual cells or rows in a Bootstrap-Vue table

Hello there, I am currently using Bootstrap-vue to display data that has been queried from a database. My goal is to have it displayed with an overflow-y style similar to this image. If you know how to achieve this effect, please share your solution. Here ...

htmlcssvue.jsbootstrap-4bootstrap-vue

How can React Components be imported into a website that is not built with React?

After developing a site with Node and Express, I am looking to incorporate a page built with React and JSX. As part of this process, I have installed Babel as an npm package and included React in the index.html file like so: <script src="https://un ...

javascriptnode.jsreactjsreact-native

How to stop a checkbox from being selected in Angular 2

I have a table with checkboxes in each row. The table header contains a Check All checkbox that can toggle all the checkboxes in the table rows. I want to implement a feature where, if the number of checkboxes exceeds a certain limit, an error message is ...

javascriptangulartypescriptangular2-ngmodel

"Unsettled" JavaScript variable persists during Ajax page transition

I'm currently working on a CRUD app using php/js, where an ajax page change is essential. Within the "add view," there is a basic table and a button that adds a new row whenever you click on it. Initially, on the first load, clicking the button adds ...

javascriptjqueryajax

Error encountered in Angular Html2Pdf: Unable to assign the 'adoptedStyleSheets' attribute on 'ShadowRoot' due to DOMException

Looking for assistance in implementing html2pdf with Angular 12 to convert specific parts of an HTML page into a downloadable PDF. ERROR MESSAGE An error occurred while trying to execute the code: index-7a8b7a1c.js:150 Uncaught (in promise) DOMExce ...

javascriptangulartypescripthtml2pdfangular12

What is the method for incorporating an onmouseover event into child states while extending the parent state controller?

I have a basic angularjs controller coupled with jquery that triggers a console log message when the mouse hovers over an anchor element: app.controller('MenuController', function() { $("a").on('mouseover', function (e) { c ...

javascriptjqueryangularjsangular-ui-routerstates

Creating a visual representation of the information stored in my JSON data file using a Quasar table

As a VueJS student, I'm struggling to display the distances from my JSON file in a table. What is the best way to retrieve and show all the distance data for "5" and "10" by both walking and driving? Should I use this code: this.concurrentsRows = JSO ...

javascriptvue.jsquasar-frameworkquasar

What is the best way to sort through data retrieved by a server component in a NextJS 13 AppDir?

I've hit a roadblock trying to integrate a search bar that filters server-fetched data in my project using NextJS 13 and AppDir. Despite numerous attempts, I can't seem to get it right. It feels like there's something crucial I'm overlo ...

javascriptreactjsnext.js

a stand-alone Node.js application connecting to a self-signed WebSocket (WSS) server

I am currently working with a node server (Meteor.js) that needs to communicate with another server using websockets. Since the communication is strictly between servers and does not involve direct users, I have decided to use a self-signed certificate. I ...

javascriptnode.jsmeteorwebsocket

Attempting to retrieve the value from a nested table within a table row using Jquery

<tr role="row" class="odd"> <td style="background-color:white"> <table> <tbody> <tr data-row-id="22"> <td id="pid"><input type="checkbox" class="sub_chk" value="8843" data-id="22">< ...

javascriptjqueryperformancehtml-table

During testing, the Vuetify expansion panel body is hidden with a display none style

Greetings! I am currently facing an issue while debugging my testing site. The problem is that the expansion panels are not displaying due to a style attribute attached to the div element of v-expansion-panel__body. Strangely, this issue does not occur on ...

javascripthtmlvue.jsvuejs2vuetify.js

Tips for resolving the Range issue with jQuery-UI slider and activating a function when changes are made

I created a simple form that calculates an estimated price based on quantity and one of three options. Then, I attempted to integrate a jQuery-UI slider into the form. However, I encountered an issue where the slider was displaying values outside of the sp ...

javascriptjqueryjquery-ui

Does .NET MVC provide the necessary separation of HTML/CSS/JS for my project?

Currently, I am collaborating with my ASP.NET development team in an effort to improve the quality of our HTML output. We are facing challenges due to ASP.NET's tendency to insert JavaScript directly into the page, creating dependencies on JS for form ...

javascripthtmlcssasp.net-mvc

Loading textures with Collada loader in Three JS

Encountering an issue with the threeJS collada loader. Upon receiving a dae model with all its textures from the backend, I parse the images (textures) and create an array of materials. let materials = []; textures.forEach((texture) => { let loadedTe ...

javascriptthree.js

Implementing Pagination Functionality Using Knockout.js

Sample JSON Data [{ "name": "A Goofy Movie (1995) 720p HDTVRip x264 Eng Subs [Dual Audio] [Hindi DD 2.0 - English DD 2.0] Exclusive By -=!Dr.STAR!=-", "progress": 0, "size": "1.06 GB", "downloaded": "87.98 KB", "hash": "8fe65e43464debe ...

javascriptjqueryhtmljsonknockout.js

Turning off tables using ASP.net controls and Telerik controls

Here is the code for my custom table: <table id="DispalyTable" border="4px" style="width: 100%;" > <tr> <td style="width: 137px; height: 137px;" valign="top"> ...

javascriptjqueryhtmlasp.nettelerik

Clicking on the FLOT graph will trigger an expansion of the visualization

Currently, I am utilizing the flot library for data plotting functionality. Flot utilizes the height and width properties of a div to create the plotted data, as shown below: <div id="graph" style="width: 300px; height: 300px;"></div> I am in ...

javascriptjqueryhtmlcssflot

When working with React, I often encounter situations where I receive very similar Unix timestamps from the `<TextField type="date">` component

I am facing an issue with setting the start date and due date using two Textfield components. Check out the code snippet below: const startDateChange = (e) => { setStartDate(Math.floor(new Date().getTime(e.target.value) / 1000)); console.log(startD ...

javascriptreactjsunix-timestamp

Unable to utilize the Firebase reference data type for accessing a subcollection

I was looking into utilizing a reference data type from the profile document in order to access a subcollection on the referenced clan document. https://i.sstatic.net/M4gmT.png https://i.sstatic.net/ltfw2.png exitClan() { console.log(this.getUser. ...

firebasevue.jsgoogle-cloud-firestorevuefire