Vuetify 2->3, заменяющий удаленный v-list-item-content / v-list-item-group
Я пытаюсь перейти с Vuetify/Vue 2->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>
В руководстве по миграции просто сказано:
v-list-item-content был удален, списки теперь используют сетку CSS для макета.
и
Группа v-list-item-group была удалена, просто добавьте значение к элементам списка, чтобы сделать их доступными для выбора, и привяжите v-model:selected к v-list, чтобы получить выбранное значение.
Я понятия не имею, что они имеют в виду под «использовать сетку CSS для макета», и, поскольку я не знаю CSS, я застрял. И примечание о v-list-item-group говорит о нескольких вещах без примеров!
Любая помощь будет оценена по достоинству. Спасибо!
(Первоначально я задал этот здесь, и мне предложили разделить его на несколько вопросов)
Ответы 1
Руководство по миграции может быть улучшено! Надеюсь, это поможет...
v-list-item-content был удален, списки используют сетку CSS для макета теперь вместо этого.
Если вы посмотрите на вывод в версии 3, вы увидите, что этот элемент есть .v-list-item__content со связанными стилями сетки, поэтому вам больше не нужно добавлять это, чтобы добиться того же результата.
v-list-item-group был удален, просто добавьте значение к элементам списка, чтобы сделайте их доступными для выбора и привяжите v-model:selected к v-list, чтобы получить выбранное значение.
Add value to list items to make them selectable.
<v-list :items = "items"></v-list>
Bind v-model:selected on v-list to get the selected value.
Это не работает, однако генерируются события, поэтому, если вам нужно значение, вы можете получить его следующим образом:
<v-list
:items = "items"
@update:selected = "selected" // <<< Listen for event
/>
Пример: Codepen
@ user3534080 да именно так
так что вы говорите, что я могу просто удалить этот раздел относительно v-list-item-content?