你可以為每個(gè)專案建立一個(gè)單獨(dú)的元件,並在該元件中處理其模態(tài)狀態(tài)。你可以使用bootstrap、bulma或純html、css來(lái)製作模態(tài)框。使用v-show="modalState"
來(lái)隱藏或顯示模態(tài)框。在你的子元件中定義modalState
:
data() { return { modalState: false } }
你的最終結(jié)構(gòu):
<div class="biblio__all"> <a v-for="i in items" v-bind:key="i.id" class="biblio__item"> <!-- 擁有模態(tài)框和主要項(xiàng)目代碼的組件 --> <subitem :item="i" /> </a> </div>