Question

当数据阵列更改顺序时，打开的面板的状态不会遵循其数据位置。

<div id="app">
  <v-app id="inspire">
    <div>
      <div class="text-center d-flex pb-4">
        <v-btn @click="changeOrder">Change order</v-btn>
        <v-btn @click="removeItem">Remove item</v-btn>
      </div>

      <v-expansion-panels
        v-model="panel"
        multiple
      >
        <v-expansion-panel
          v-for="(item, i) in items">
          <v-expansion-panel-header>{{ item.name }}</v-expansion-panel-header>
          <v-expansion-panel-content>
            Lorem ipsum dolor sit amet.
          </v-expansion-panel-content>
        </v-expansion-panel>
      </v-expansion-panels>
    </div>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      panel: [],
      items: [
        { id:1, name: 'James', },
        { id:2, name: 'Bernt', },
        { id:3, name: 'Julie', },
        { id:4, name: 'Veronica', },
      ],
    }
  },
  methods: {

    changeOrder () {
      this.items = this.items.reverse();
    },

    removeItem () {
      this.items.splice(0, 1);
    },
  },
})

https://codepen.io/Agint/pen/GRpmBxE

在演示中，打开面板，然后单击按钮，您将看到问题。从列表中删除数据时，同样存在问题。如果您打开一个面板并将其卸下，则兄弟姐妹会突然打开。

我该如何解决这个问题？

Answer 1

每个v-expansion-panels组件的multiple道具的expand：

控制扩展面板中内容的打开/关闭状态。对应于当前打开的内容的从零开始的索引。如果使用items道具（以前是1.5.x中的methods: { changeOrder () { // reverse the elements in your items array this.items = this.items.reverse() // get the max index of elements in your items array const maxIndex = this.items.length - 1 // set index of each open panel to its inverse this.panel = this.panel.map(p => maxIndex - p) }, removeItem () { this.items.splice(0, 1) // since the index of each item will be effectively reduced by 1 // this.panel = this.panel.map(p => p - 1) }, }），则它是一个数字数组，其中每个条目都对应于打开的内容的索引。索引顺序不相关。

这意味着打开的面板与其内容无关。如果您反转或更改_audioPlayer.stop();数组的顺序，则还需要更新面板数组以相应地调整打开索引：

{{1}}

Vuetify扩展面板，打开状态不遵循dataprovider

1 个答案: