CODEWITHSUNDEEP
javascriptvue.jsvuetify.jsv-for
Jeff L
Jeff L

Reputation: 11

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

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>

Upvotes: 1

Views: 3415

Answers (3)

chandu komati
chandu komati

Reputation: 795

<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

Upvotes: 0

Jeff L
Jeff L

Reputation: 11

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.

Upvotes: 0

tohasanali
tohasanali

Reputation: 934

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>

Upvotes: 2

Related Questions