Using the v-for directive to create sequential lists

Question

Using the v-for directive to create sequential lists

I am struggling to display pairs of data from an object based on category using nested v-for loops. The object, categoryArray, contains entries such as {stage 1, red}, {stage 1, blue}, {stage 2, orange}, {stage 3, brown}, {stage 2, green.

My desired display is: Stage 1: red, blue Stage 2: orange Stage 3: brown

Although I haven't been able to create workable code yet, my approach has been to extract unique stages and then iterate through the items within each stage.

To get the unique stages:

An additional challenge arises when trying to display all matching colors within each unique stage, as shown in the incomplete template and script above.

I feel like I'm almost there but struggling with obtaining unique stages. More insights can be found here.

javascript vue.js quasar

Answer 1

Answer №1

Does this meet your requirements?

from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello, World!'

if __name__ == '__main__':
    app.run()

<h1>Welcome to my Flask App</h1>

<script src="https://cdn.jsdelivr.net/npm/vue@next/dist/vue.global.prod.js"></script>
<div id="app">
  <p>This is a Vue.js application.</p>
</div>

Answer 2

Does this meet your requirements?

from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello, World!'

if __name__ == '__main__':
    app.run()

<h1>Welcome to my Flask App</h1>

<script src="https://cdn.jsdelivr.net/npm/vue@next/dist/vue.global.prod.js"></script>
<div id="app">
  <p>This is a Vue.js application.</p>
</div>

Answer 3

Answer №2

The index used in both loops is the same, which is incorrect.

   <div v-for="(stage, index) in uniqueRooms" :key="index">
                                                     ----
       {{ room }}
      <div v-for="(color, index) in filterStages" :key="index">
                                                        -----

Answer 4

The index used in both loops is the same, which is incorrect.

   <div v-for="(stage, index) in uniqueRooms" :key="index">
                                                     ----
       {{ room }}
      <div v-for="(color, index) in filterStages" :key="index">
                                                        -----

Using the v-for directive to create sequential lists

Answer №1

Answer №2

Similar questions

Is there a way for me to delay the return from eval() until a callback is received?

Is there a JavaScript method for opening a new window regardless of the PHP file being used?

Creating a streamlined real-time application using the powerful combination of Django-swampdragon and AngularJS

capture the emitted value from a child component within a parent component

Node.js has the ability to establish internal connections, however it cannot establish connections

React has identified a modification in the sequence of Hooks invoked, however, I am unable to locate any Hooks being invoked conditionally

I am exploring directories on my server but encountered a restriction while using $.ajax

Using a React component to import a module for publishing on NPM

React Router version 6.4.5, automatic redirection upon loading the page

steps for signing up and keeping the parameters current

Having trouble with CORS errors persisting despite configuring CORS options for Google Authentication on React/Node/Passport

Utilizing Three.js Texture with shaderMaterial

Dynamic Population of Django Drop Down List using JavaScript

Utilizing fab-icons with CDN in Next.js version 13.4

Using node modules within an HTML document

A step-by-step guide on making a list item clickable and redirecting to a URL using Vue.js

When loading, HTML tags with Vue.js v-if and v-for directives flicker on the screen

Tips for displaying a removal option and eliminating an uploaded document

Displaying outcomes in dialog box when button is pressed

Encountering an issue upon pressing the 'calculate' button