Vuetify 扩展面板，打开状态不跟随 dataprovider

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

每个the docs value 属性的v-expansion-panels 组件：

控制扩展面板中内容的打开/关闭状态。对应于当前打开内容的从零开始的索引。如果使用了 multiple 属性（以前在 1.5.x 中为 expand），那么它是一个数字数组，其中每个条目对应于打开内容的索引。索引顺序不相关。

这意味着打开的面板与其内容无关。如果你颠倒或改变items数组的顺序，你还需要更新面板数组来相应地调整打开的索引：

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)
    },
}