我正在嘗試從Vuetify/Vue 2升級-& gt;3.我不是前端開發人員,只是負責升級一些遺留代碼以保持正常運行。不幸的是,遷移指南似乎假設了一定程度的CSS基礎知識,并且沒有提供如何修復所有被刪除內容的示例。
我正在努力解決的一個問題是替換這段代碼中不推薦使用的v-list-item-content/v-list-item-group:
<v-navigation-drawer :rail="mini" permanent clipped app width="200">
<v-list density="compact">
<v-list-item-group v-model="selected">
<v-list-item
v-for="item in items"
:key="item.title"
link
:disabled="item.disabled"
:icon="item.icon || null"
>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-navigation-drawer>
遷移指南只是說:
列表項內容已被刪除,列表現在使用CSS網格進行布局。
和
v-list-item-group已被移除,只需向列表項添加值以使其可選,并綁定v-list上的v-model:selected以獲取所選值。
我不知道他們說的& quot將CSS網格用于布局& quot而且由于我不懂CSS,所以卡住了。關于v-list-item-group的注釋討論了多種情況,但沒有舉例說明!
任何幫助都將不勝感激。謝謝大家!
(我最初在這里提出這個問題,有人建議我把它分成多個問題)
遷移指南可以改進!希望這有所幫助...
列表項內容已被刪除,列表使用CSS網格進行布局 現在相反。
如果您查看版本3下的輸出,您會看到這個元素在那里。v-list-item__content具有關聯的網格樣式,因此您不再需要添加它來實現同樣的事情。
v-list-item-group已被刪除,只需向列表項添加值即可 使它們可選并綁定v-model:在v-list上選擇以獲取 選定的值。
為列表項添加值,使其可選。
<v-list :items="items"></v-list>
綁定v-model:在v-list上選擇以獲取選擇的值。
這不起作用,但是會發出一些事件,所以如果您需要該值,可以使用下面的代碼獲取:
<v-list
:items="items"
@update:selected="selected" // <<< Listen for event
/>
示例:Codepen