我有一個品牌串列,其中每個品牌都包含子品牌。我已經遍歷了品牌并展示了各自的子品牌。我想使用按鈕為每個品牌顯示更少的專案。我已經按照這篇文章中的說明
uj5u.com熱心網友回復:
所有限制都被切換,因為它們都系結到組件上的相同屬性:limit_by。解決此問題的方法是在brands您從服務器收到物件格式后重新構造物件格式,以便每個類別都有一些您可以使用的顯示資訊。
嘗試像這樣格式化 JSON:
"brands": {
"champagne": {
"limit_by": 13, // Replace 13 with the length of sub-brands array (this will change when you toggle the limit)
"subbrands": [...]
},
...
}
像這樣的 HTML:
<a
:href="`/brands/${item.url}`"
v-for="(item, key) in brand"
:key="key">
<span v-if="key < brand.limit_by" >
{{item.brand | capitalize}}
</span>
</a>
和這樣的simple_toggle功能:
simple_toggle(brand, showAll) { // Where brand is a brand category from the API and showAll is a flag that determines whether to show all sub-brands or limit them
brand.limit_by = showAll ? brand.subbrands.length : this.default_limit;
}
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/344819.html
