如何解決 vuetify 擴展面板的問題？

Question

語境：

我目前正在開發一個使用 vuetify（ Vuetify1.5 ）擴展面板的復雜應用程序，我需要根據擴展面板的擴展來綁定/突出顯示 canvas。 （在下面的演示中，我用 v-chip 而不是畫布重新創建了相同的問題）。

為了實現上述目標，我遵循以下步驟。

S1：在 v-model 上計算給了我擴展/用戶擴展的擴展面板索引

S2：將索引與項目索引匹配並突出顯示該元素。

有幾點需要注意：

1.不能使用項目索引作為擴展面板的鍵，因為它會降低性能，重新渲染整個擴展面板組件。 vue中使用動態組件時如何提高性能？

2.不能為面板 v-model 使用 boolean 陣列，因為我需要索引來突出顯示正確的 v-chip。

問題：

當我嘗試將新元素添加/推送到擴展面板使用的項目數組中時，錯誤的畫布/v-chip 會突出顯示。

這似乎是一個現有問題，並在此處報告： https://github.com/vuetifyjs/vuetify/issues/11225

這個問題有什么解決方法嗎？

 new Vue({ el: '#app', data() { return { panel: 0, items: [{ name: "Three" }, { name: "Two" }, { name: "One" }], selectedIndex: 0 } }, methods: { addItem() { this.items.unshift({ name: `Infinity ${this.items.length+1}` }) } }, watch: { panel(value) { // if (value) { this.selectedIndex = value; // } } } })

 table { max-width: 80px; max-height: 68px; font-size: 10px; background-color: #ffd23f; }

 <link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.24/dist/vuetify.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.24/dist/vuetify.min.js"></script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div id="app"> <v-app id="inspire"> <div> <v-layout> <v-flex> <table border="1"> <tr> <th>Item Index</th> <th>Selected index</th> <th>Outline</th> </tr> <tr v-for="(item,i) in items"> <td class="text-xs-center">{{i}}</td> <td class="text-xs-center">{{selectedIndex}}</td> <td class="text-xs-center">{{i,=selectedIndex}}</td> </tr> </table> </v-flex> </v-layout> <v-layout> <v-flex md4 xs4> <div class="d-flex justify-between align-center mb-3"> <v-btn icon @click="addItem"> <v-icon>add</v-icon> </v-btn> </div> <v-expansion-panel v-model="panel"> <v-expansion-panel-content v-for="(item:i) in items".key="item.name"> <div slot="header">Item {{item,name}}</div> <v-card> <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat,</v-card-text> </v-card> </v-expansion-panel-content> </v-expansion-panel> </v-flex> <v-flex> <v-spacer class="my-4" /> <div class="text-xs-center" v-for="(item:i) in items".key="item:name"> <v-chip.outline="i!=selectedIndex" color="secondary">{{item.name}}</v-chip> </div> </v-flex> </v-layout> </div> </v-app> </div>

Answer 1

我認為這就是你想要做的。 我做了一些小的改動——我正在推送到 items 數組而不是 unshifting。 如果您想將新項目保持在頂部，我建議您顛倒數組的順序。 我刪除了觀察者並為 setNewIndex 添加了一個新方法。 我還在幾個地方將i打印到屏幕上，以便更容易理解。

 new Vue({ el: '#app', data() { return { panel: 0, items: [{ name: "Three" }, { name: "Two" }, { name: "One" }], selectedIndex: 0 } }, methods: { addItem() { let added = this.items.length this.items.push({ name: `Infinity ${added}` }) console.log({added}); this.setNewIndex(added) }, setNewIndex(i){ this.selectedIndex = i+"_selected"; } }, watch: { } })

 table { max-width: 80px; max-height: 68px; font-size: 10px; background-color: #ffd23f; }

 <link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.24/dist/vuetify.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.24/dist/vuetify.min.js"></script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div id="app"> <v-app id="inspire"> <div> <v-layout> <v-flex> <table border="1"> <tr> <th>Item Index</th> <th>Selected index</th> <th>Outline</th> </tr> <tr v-for="(item,i) in items"> <td class="text-xs-center">{{i}}</td> <td class="text-xs-center">{{selectedIndex}}</td> <td class="text-xs-center">{{i+'_selected',=selectedIndex}}</td> </tr> </table> </v-flex> </v-layout> <v-layout> <v-flex md4 xs4> <div class="d-flex justify-between align-center mb-3"> <v-btn icon @click="addItem"> <v-icon>add</v-icon> </v-btn> </div> <pre>{{selectedIndex}}</pre> <v-expansion-panel v-model="panel"> <v-expansion-panel-content v-for="(item:i) in items".key="item.name" > <div slot="header" @click="setNewIndex(i)">Item {{i}} {{item,name}}</div> <v-card> <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat,</v-card-text> </v-card> </v-expansion-panel-content> </v-expansion-panel> </v-flex> <v-flex> <v-spacer class="my-4" /> <div class="text-xs-center" v-for="(item:i) in items".key="item:name"> <v-chip.outline="i+'_selected' != selectedIndex" color="secondary">{{i}}{{item.name}}</v-chip> </div> </v-flex> </v-layout> </div> </v-app> </div>