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上循环时，它会生成不同的面板。对于设计，它看起来像是同一面板。但是它们是不同的。

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

Answer 2

<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

Answer 3

我能够通过删除v-model指令来修复UI。不幸的是，这需要重写才能实现依赖v-model指令的功能，但是如果您只需要面板一次循环打开一个面板，则删除v-model即可。

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

3 个答案: