Панель расширения Vuetify, открытое состояние не следует поставщику данных - PullRequest
Новая
       51

Панель расширения Vuetify, открытое состояние не следует поставщику данных

0 голосов
/ 27 апреля 2020

Когда массив данных меняет порядок, состояние открытых панелей не соответствует их позициям данных. 

<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

В демо, откройте панель и нажмите кнопку, и вы увидите проблему. Также та же проблема при удалении данных из списка. Если у вас есть одна открытая панель, и вы удаляете ее, внезапно открывается брат или сестра.

Как мне решить эту проблему?

1 Ответ

1 голос
/ 27 апреля 2020

За документы value реквизит компонента v-expansion-panels:

Управляет открытым / закрытым состоянием содержимого на панели расширения. Соответствует нулевому индексу текущего открытого контента. Если используется multiple prop (ранее 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)
    },
}
...