V-for循环内的Vue JS Vuetify扩展面板打开所有面板

Question

我正在从数据库中提取数据，并使用“ v-for”循环遍历DOM中的数据。我在循环中检查了扩展面板组件。问题是，如果用户单击以打开一个扩展面板，则会在循环中打开所有其他扩展面板。我尝试使用v-model，但是因为面板包含在父循环中，所以模型只是分配给面板的每个实例。

这里是简化的代码笔，用于显示我正在处理的基本结构-

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>

Answer 1

在expansion-panel而不是div上执行循环>

<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>