Javascript Vue JS Vuetify扩展面板位于V-for循环内，打开所有面板

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

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

{{data.name}

{{step.name}

---

在

扩展面板上执行循环操作

而不是在

div上执行循环操作

当您在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>

{{data.name}

{{step.name}

{{data.name}
{{step.name}

---

我可以通过删除v-model指令来修复UI。不幸的是，这需要覆盖以实现依赖于v-model指令的功能，但如果您只需要在循环中一次打开一个面板，则删除v-model会起作用。

检查循环是否有效，因为您在代码“v-modal”而不是v-model中有一个打字错误。谢谢，因为这实际上帮助我把v-model指令是UI行为背后的罪魁祸首这一点隔离开来。

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

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