Vuetify扩展面板，打开状态不遵循数据提供方。

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.ioAgintpenGRpmBxE。

在演示中，打开一个面板，点击按钮，就能看到问题。当你从列表中删除数据时，也是同样的问题。如果你打开了一个面板，你删除了它，兄弟姐妹突然打开了。

如何攻克这个问题？

Answer 1

每 文献 的 value 翘楚 v-expansion-panels 组件。

控制扩展面板中内容的打开-关闭状态。对应于当前打开内容的零基索引。如果 multiple 榰 expand 1.5.x)，那么它是一个数字数组，每个条目对应于打开内容的索引。索引顺序与此无关。

这意味着哪个面板被打开与它们的内容没有关系。如果您反转或更改了 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)
    },
}