Is it possible to nest v-for directives within a component file?

Even after going through the VueJS tutorials multiple times, I am still unable to find a solution to this problem.

My issue revolves around displaying a list of lists using accordions, which is supposed to work smoothly with vue-strap components.

For example, if I have a list like this:

'myList': [
  ['el 1', 'el 2', 'el 3'], ['el 1', 'el 2'], ['el another']
]

I would expect the following layout:

List 1:

  • el 1
  • el 2
  • el 3

List 2:

  • el 1
  • el 2

List 3:

  • el another

However, for some reason VueJS fails to render this component...

Here's the code snippet:

<template>
  <accordion id="rabo" :one-at-atime="true">
    <template v-for="list in myLists">
      <panel header="List #{{ $index }}" :is-open="true">
        <ul>
          <li v-for="el in list">
            {{ el }}
          </li>
        </ul>
      </panel>
    </template>
  </accordion>
</template>

<style lang="scss" scoped>
</style>

<script>
  import Vue from 'vue'
  import { accordion, panel } from 'vue-strap'

  module.exports = {
    components: {
      'accordion': accordion,
      'panel': panel
    }
  }

  new Vue({
    el: '#rabo',
    data: {
      'myLists': [['el 1', 'el 2', 'el 3'],['el 1','el 2'],['el another']]
    }
  })
</script>

Answer №1

Here are the steps you should follow:

  1. Move the Vue instance to a separate file
  2. Place the myLists array within the data property of the component
  3. Ensure proper binding of the header prop

MyAccordion.vue

<template>
  <accordion :one-at-atime="true">
    <template v-for="list in myLists">
      <panel :header="`List #${$index}`" :is-open="true">
        <ul>
          <li v-for="el in list">
            {{el}}
          </li>
        </ul>
      </panel>
    </template>
  </accordion>
</template>

<script>
  import { accordion, panel } from 'vue-strap'

  export default {
    components: {
      accordion, panel
    },

    data () {
      return {
        myLists: [
          ['el 1', 'el 2', 'el 3'],
          ['el 1', 'el 2'],
          ['el another']
        ]
      }
    }
  }
</script>

Vue instance

import Vue from 'vue'
import MyAccordion from './MyAccordion.vue'

new Vue({
  el: '#demo',
  components: { MyAccordion }
})

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

Methods for presenting text from an object array using Angular

I'm running into a bit of trouble with getting my text to show up properly in my code. In the HTML, I have <td>{{cabinetDetails.cabinetType}}</td> and my data source is set as $scope.cabinetDetails = [{cabinetType: 'panel'}]; De ...

The response data from Axios remains undefined even after a successful request

function verifyPassword() { let pass = document.getElementById("password").value let emailAddr = document.getElementById("email").value Service.confirmLoginPassword(emailAddr, pass).then(response => { result = re ...

Tips for optimizing mobile performance by loading .obj models into objects on three.js

How can I properly load .obj models with objLoader and MTLLoader for my three.js mini game? I am facing an issue where the game loads fine on computers but fails to load on mobile browsers. Specifically, when accessed on a phone browser, the game attempts ...

Using the useQuery() function in a Next.js React app successfully fetches data from the API on the client side, yet the same API call fails to work when implemented in getServerSideProps on

I am attempting to retrieve data from the backend server using React Query within Next JS getServerSideProps. Here is the function used to fetch the data: export const getGoogleAuthUrl = async () => { const res = await fetch(`${process.env.NEXT_PUBLIC ...

JavaScript: create a collision detection algorithm to find pairs of objects in an object, not an array

I'm in the process of developing a Javascript game and I'm facing the challenge of implementing collision detection. Each element rendered in the game has its own unique ID and is stored in an object. I opted for using an object as a container i ...

Postman grants me the cookie, yet Chrome doesn't seem to deliver it

As I attempt to set a cookie named auth, containing the user's ID signed with JWT, I am puzzled by not seeing the auth cookie in Chrome when visiting http://localhost:5000/. Instead, I only observe these two cookies; Interestingly, when accessing the ...

Checkbox ensemble computes total score

I am currently working on a project that involves multiple checkbox groups, with each group containing 3 checkboxes labeled as (1, X, 2). My goal is to assign a value of 100% to each group, distributed evenly among the checkboxes within it. The distributio ...

The watermark feature in HTML may not appear when printed on every page

I'm facing an issue with adding a watermark style. The watermark displays only on the first page when attempting to print in Chrome. It works perfectly in Firefox and IE. <style type="text/css"> #watermark { color: #d0d0d0; font-size: 90pt; ...

Using VueJS to perform a filtering operation on the JSON data when a button is clicked

I need to implement a filter function for my fetched json data using buttons. When a button is clicked, only the data (in this case book names) that match the clicked button should be displayed while hiding the others until another button is clicked. The ...

Using the drag and drop feature with the v-textarea component in Vuetify

Struggling to incorporate a Drag and Drop feature on vuetify v-textarea. Encountering an issue where clicking on the v-textarea results in the value from a dropped component being removed. Unsure if it's a flaw in my code or a limitation in vuetify v- ...

Tips for generating a dynamic Array name to be sorted with React JS

My lack of experience is causing some issues for me. I am currently working on a form in react where the user has to select two values first. Based on these two values, a third value will be available for selection. However, the options for this third val ...

How can it be that "Function" actually functions as a function?

In JavaScript, there exists a function called "Function". When you create an instance of this function, it returns another function: var myfunc = new Function('arg1','arg2','return arg1+arg2'); In the above example, the vari ...

When trying to run a jQuery function on click or load events, an error message stating that

When I have an .on(click) event triggering an ajax call, I want the same actions to occur when the page loads as well. My idea is to create a function that contains everything within the .on(click) event and trigger this function on page load. Although I ...

Include a new variable in a JavaScript email template

Is there a way to include the variable bob in the body of an email? var bob; function sendMail() { var link = "mailto:YourEmailHere" + "?cc=" + "&subject=App Build Link Buit With MWFPRO's App Build Tool" + "&body=Hi ...

Finding a solution to the type issue of error handling in Route Handler with NextJS

I'm working on a route handler located at app/api/transactions/route.ts. Here's a snippet of the code: import { NextRequest, NextResponse } from "next/server"; import { AxiosError } from "axios"; import axios from "../axi ...

When the page is scrolled, trigger a click event on the next button in

Currently, I have a listing page that features pagination at the bottom. However, my goal is to transform this into an infinite loading page. The issue I am facing is that when the click event triggers after scrolling to the bottom, it makes calls for pag ...

"Create dynamic tables with AngularJS using ng-repeat for column-specific rendering

I have a model called Item with the following structure: {data: String, schedule: DateTime, category: String} I want to create a report that displays the data in a table format like this: <table> <tr> <th>Time Range</th&g ...

Enhancing user experience by implementing AJAX in a contact form to eliminate the need for page

I have read numerous questions on this topic and have compiled the code I currently have from various responses. Unfortunately, despite my efforts, I am unable to make it work and I cannot identify the reason behind this issue. Below is the HTML form str ...

Ways to Determine the Height and Width of an Image Once it has been Adjusted for a View

Is there a way to retrieve the height and width of an image after it has been resized for a view? I have images that may vary in original dimensions, but users can resize them as needed. For example, this code from the console gives the client height: do ...

Activating Jquery toggle on several elements instead of just the specified element

Hey everyone, I have a question regarding jQuery. I have a toggle function that is supposed to activate when clicking on a specific element - in this case, my logo image with the id of #logobutton. The toggle works great, but there's a problem. The an ...