Nested v-for problem confusion

Question

Nested v-for problem confusion

I am encountering an issue with my code and I'm wondering if anyone can help me troubleshoot it. The problem is that whenever I click on the content of one panel, all panel contents with the same index expand or collapse instead of just the one I clicked on. Any suggestions or ideas would be greatly appreciated. Thank you.

<div v-for="(group, i) in groups" :key="i" class="pb-4">
  <p class="text-h5 primary text-center white--text">{{ group.title }}</p>
  <div v-if="group.links">
    <a v-for="(link, u) in group.links" :key="u" :href="link.src" class="black--text"> {{ link.title }}</a>
  </div>
  <v-expansion-panels v-model="activesPanels" multiple accordion dense flat>
    <v-expansion-panel v-for="(item, v) in group.fact" v-show="shouldRender(v)" :key="v">
      <v-expansion-panel-header class="px-0">{{ item.title }}</v-expansion-panel-header>
      <v-expansion-panel-content>
         <type :fact="item" :models="models" />
      </v-expansion-panel-content>
    </v-expansion-panel>
  </v-expansion-panels>
</div>

javascript vue.js vuetifyjs3

Answer 1

Answer №1

To resolve the issue, ensure that each group has its own unique v-model variable instead of using the same activesPanels for every group. This will maintain the opening and closing state of each group individually.

Additionally, make sure to use unique properties for template keys to prevent errors such as "Duplicate keys detected."

Check out this working demo:

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caaca5a4be8afce4b2">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="88fefdedfce1eef1c8baa6f0">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  </head>
  <body>
    <div id="app">
      <v-app id="inspire">
    <div v-for="(group, i) in groups" :key="i">
  <p class="primary text-center white--text">{{ group.title }}</p>
  <div v-if="group.links">
    <a v-for="link in group.links" :key="link.src" :href="link.src" class="black--text"> {{ link.title }}</a>
  </div>
  <v-expansion-panels v-model="group.activesPanels" multiple accordion dense flat>
    <v-expansion-panel v-for="item in group.fact" :key="item.title">
      <v-expansion-panel-header class="pa-0">{{ item.title }}</v-expansion-panel-header>
      <v-expansion-panel-content class="pa-0">
         Hello
      </v-expansion-panel-content>
    </v-expansion-panel>
  </v-expansion-panels>
</div>
  </v-app>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1c7c4d4f1839fc9">[email protected]</a>/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84f2f1e1f0ede2fdc4b6aafc">[email protected]</a>/dist/vuetify.js"></script>
    <script>
      new Vue({
        el: '#app',
        data () {
      return {
        groups: [
        {
          title: "group1",
          activesPanels: [],
          fact: [
            {
              title: 'fact1'
            }
          ],
          links:[
            {
              src: "https://google.com",
              title: "Hello"
            },
            {
              src: "https://twitter.com",
              title: "Hello"
            }
          ]
        },
        {
          title: "group2",
          activesPanels: [],
          fact: [
            {
              title: 'fact2'
            }
          ],
          links:[
            {
              src: "https://www.shorturl.at/",
              title: "Hello"
            },
            {
              src: "https://www.npmjs.com/package/vuex-map-fields",
              title: "Hello"
            }
          ]
        }
      ]
      }
      },
        vuetify: new Vuetify(),
      })
    </script>
  </body>
</html>

Answer 2

To resolve the issue, ensure that each group has its own unique v-model variable instead of using the same activesPanels for every group. This will maintain the opening and closing state of each group individually.

Additionally, make sure to use unique properties for template keys to prevent errors such as "Duplicate keys detected."

Check out this working demo:

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="caaca5a4be8afce4b2">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="88fefdedfce1eef1c8baa6f0">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  </head>
  <body>
    <div id="app">
      <v-app id="inspire">
    <div v-for="(group, i) in groups" :key="i">
  <p class="primary text-center white--text">{{ group.title }}</p>
  <div v-if="group.links">
    <a v-for="link in group.links" :key="link.src" :href="link.src" class="black--text"> {{ link.title }}</a>
  </div>
  <v-expansion-panels v-model="group.activesPanels" multiple accordion dense flat>
    <v-expansion-panel v-for="item in group.fact" :key="item.title">
      <v-expansion-panel-header class="pa-0">{{ item.title }}</v-expansion-panel-header>
      <v-expansion-panel-content class="pa-0">
         Hello
      </v-expansion-panel-content>
    </v-expansion-panel>
  </v-expansion-panels>
</div>
  </v-app>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1c7c4d4f1839fc9">[email protected]</a>/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84f2f1e1f0ede2fdc4b6aafc">[email protected]</a>/dist/vuetify.js"></script>
    <script>
      new Vue({
        el: '#app',
        data () {
      return {
        groups: [
        {
          title: "group1",
          activesPanels: [],
          fact: [
            {
              title: 'fact1'
            }
          ],
          links:[
            {
              src: "https://google.com",
              title: "Hello"
            },
            {
              src: "https://twitter.com",
              title: "Hello"
            }
          ]
        },
        {
          title: "group2",
          activesPanels: [],
          fact: [
            {
              title: 'fact2'
            }
          ],
          links:[
            {
              src: "https://www.shorturl.at/",
              title: "Hello"
            },
            {
              src: "https://www.npmjs.com/package/vuex-map-fields",
              title: "Hello"
            }
          ]
        }
      ]
      }
      },
        vuetify: new Vuetify(),
      })
    </script>
  </body>
</html>

Answer 3

Answer №2

Avoid using indexes as keys in your v-for loop to ensure uniqueness for each element. When using index as a key, you may end up with multiple elements having the same index, causing Vue to struggle in tracking DOM changes. This issue worsens when editing the array and changing the indexes of items within it.

Instead, opt for a unique value like an id, link.url, or item.title as your key in the code.

For more details refer to the documentation: https://vuejs.org/guide/essentials/list.html#maintaining-state-with-key

Answer 4

Avoid using indexes as keys in your v-for loop to ensure uniqueness for each element. When using index as a key, you may end up with multiple elements having the same index, causing Vue to struggle in tracking DOM changes. This issue worsens when editing the array and changing the indexes of items within it.

Instead, opt for a unique value like an id, link.url, or item.title as your key in the code.

For more details refer to the documentation: https://vuejs.org/guide/essentials/list.html#maintaining-state-with-key

Nested v-for problem confusion

Answer №1

Answer №2

Similar questions

Determine whether an element has the capability to hold text content

Is there a way to verify that all of my HTML elements have been loaded in AngularJS?

Upload multiple files at once, edit span text, and retitle to files chosen

Issue with Jquery: Checkbox fails to get checked in Internet Explorer 7

When attempting to import and utilize global state in a component, the error message "Cannot iterate over null object"

It requires two clicks on the button for the Vue and Pinia store to update

Accordions housing Bootstrap 3 pills in a sleek design

Encountered an error when creating my own AngularJS module: Unable to instantiate

Using Node to upload various large JSON files into mongoDB

JavaScript: Repeated Depth First Exploration for hierarchical rearrangement implemented with d3's recursion()

show tab focus outline only

Could not locate module: The package path ./react is not exported from the package in E:NextAppportfolio_website-mainportfolio_website-main ode_modules ext-auth

What are the steps to resolve the issue "Error: no valid exports main found" specifically on a Windows 7 operating system?

Troubleshooting: Angular 6 Renderer2 Issue with Generating Dynamic DOM Elements for SELECT-Option

Position a div element after another using the :after pseudo-element

Creating a user-friendly interface for the admin to easily upload photos by implementing a php/bootstrap/js code within the panel

JavaScript button is not functioning properly to increase or decrease the value in the input field

Retrieving a result from a function call is a fundamental aspect of programming

What is the proper way to implement ref in typescript?

Symfony: The Database Query Button with a Pop-up Feature