Vue JS Vuetify Expansion Panels Inside a V-for Loop Opening all panels

Related searches

I am pulling data from a data base and looping through the data in the DOM with a "v-for" loop. I have vuetify expansion panel components inside the loop. The issue is if the user clicks to open one expansion panel it opens all of the other expansion panels in the loop. I have tried using v-model but because the panels are contained in a parent loop the model is just assigned to every instance of the panel.

Here is a simplified code pen to show the basic structure I am dealing with -

https://codepen.io/jbodeen/pen/dyobPem?editable=true&editors=101

<div id="app">
<div v-for="data in testData">
  <v-expansion-panels
    v-model="panel"
  >
    <v-expansion-panel>
      <v-expansion-panel-header>{{ data.name }}</v-expansion-panel-header>
      <v-expansion-panel-content>
        <ul>
          <li v-for="step in data.steps">{{ step.name }}</li>
        </ul>
      </v-expansion-panel-content>
    </v-expansion-panel>


  </v-expansion-panels>
</div>

Do the loop on expansion-panel not on div.

while you loop on div it generates different panels. for the design it looks like same panel. but they are different.

<div id="app">
    <div>
      <v-expansion-panels
        v-model="panel"
      >
        <v-expansion-panel v-for="(data, index) in testData">
          <v-expansion-panel-header>{{ data.name }}</v-expansion-panel-header>
          <v-expansion-panel-content>
            <ul>
              <li v-for="step in data.steps">{{ step.name }}</li>
            </ul>
          </v-expansion-panel-content>
        </v-expansion-panel>


      </v-expansion-panels>
    </div>
</div>

Expansion panel component — Vuetify.js, The v-expansion-panel component is useful for reducing vertical space with large Controls the opened/closed state of content in the expansion-panel. Flairo Pro — is an all-in-one Vuetify theme designed to create pixel perfect websites. Expansion panel component for Vuetify framework. The v-expansion-panel component is useful for reducing vertical space with large amounts of information. The default functionality of the component is to only display one expansion-panel body at a time, however, with the expandable property, the expansion-panel can remain open until explicitly closed.

<div id="app">
    <div v-for="data in testData">
        <v-expansion-panels v-model="data in testData">
        <v-expansion-panel>
          <v-expansion-panel-header>{{ data.name }}</v-expansion-panel-header>
          <v-expansion-panel-content>
            <ul><li v-for="step in data.steps">{{ step.name }}</li></ul>
          </v-expansion-panel-content>
        </v-expansion-panel>
      </v-expansion-panels>
    </div>
</div>

codepen link

Vuetify Tutorial #21 - Expansion Panels, Hey gang, in this video we'll take a look at how to create expansion panels in Vuetify to list Duration: 10:22 Posted: Dec 6, 2018 Expansion panel component for Vuetify framework. The v-expansion-panel component is useful for reducing vertical space with large amounts of information. The default functionality of the component is to only display one expansion-panel body at a time; however, with the expandable property, the expansion-panel can remain open until explicitly closed.

I was able to fix the UI by removing the v-model directive. Unfortunately this requires overrides to achieve the functionality that relies on the v-model directive, but if you just need the panels to open one at a time in a loop, removing the v-model works.

[Bug Report] Expansion panel does not open when wrapped in , Versions and Environment Vuetify: 0.17.2 Vue: 2.5.7 Browsers: [Bug Report] Expansion panel does not open when wrapped in custom component #2617 @click handler to the header slot element which simply toggles the v-model. look for active tab in current component instead of all document * fix:� Hey gang, in this video we'll take a look at how to create expansion panels in Vuetify to list out our own personal projects. We''ll also quickly talk about computed properties in Vue.

css rule overriding expansion panel content � Issue #381 � vuetifyjs , Steps to reproduce Use elements inside an expansion panel component, eg select components. What is rzb opened this issue on Apr 16, 2017 � 2 comments. Vue.js component for creating stackable slideout panels. 16 June 2018 A Vue.JS plugin for Snackbars based on Google Material. A Vue.JS plugin for creating and displaying snackbars following the material design policies created by Google.

Vuetify Expansion Panels, <v-expansion-panel expand>. 7. <v-expansion-panel-content>. 8. <div slot=" header">. 9. <v-layout>. 10. <v-flex xs6 class="text-xs-left">. 11. <v-subheader� Vuetify is a Material Design component framework for Vue.js. It aims to provide all the tools necessary to create beautiful content rich applications.

The v-icon component provides a large set of glyphs to provide context to various aspects of your application. For a list of all available icons, visit the official Material Design Icons page.

Comments
  • check it for loop vuetifyjs.com/en/components/expansion-panels
  • This works because you have a typo in the code "v-modal" instead of v-model. Thanks because this actually helped me in isolating that the v-model directive was the culprit behind the UI behavior.