Блог

Я считаю, что проблема с затемнением при наведении должна быть в другом месте и не связана со странностью, которую вы видите в отладчике Vue. Я не думаю, что с вашим кодом что-то не так (сравните его с тем, что я упоминаю в № 1 ниже). Я склонен полагать, что странность в отладчике-это либо его собственная ошибка, либо ошибка (или функция?) связано с тем, как отладчик отражает внутренние компоненты Vuetify, что не портит реальное поведение приложения. Вот мои аргументы:

1. Посмотреть Vuetify сетки с карты примеру — он структурирован таким же образом, как в вашем примере (игнорировать их ‘простудные’ атрибут в-коль тег — они демонстрируют неравномерное распределение столбцов, и если вы удалите этот атрибут, вы получаете практически собственный пример с 3 карточек, каждая из в-кол). Однако, если вы попытаетесь скопировать и вставить этот стандартный пример Vuetify в пустое приложение Vue CLI и посмотрите в отладчик, вы увидите ту же странную иерархию. Проверьте мой скриншот: Это, однако, не портит модель DOM, где v-карты находятся внутри v-cols, как и ожидалось: это также не создает никаких проблем с реальным поведением приложения. Изменение цвета фона при наведении (я добавил это простое изменение CSS в исходный пример Vuetify, просто чтобы попытаться воспроизвести вашу исходную проблему) работает как заклинание. Обратите внимание, что красный фон на одной карточке скриншота — он распространяется только на одну зависшую карту.
2. Я помню, что в прошлом видел ту же странность иерархии Vuetify в отладчике Vue, хотя это не создавало никаких проблем и, похоже, не было вызвано какими-либо ошибками в коде. В то время я просто проигнорировал это.
3. Я также скопировал ваш пример в кодовую панель, добавив всего две основные вещи: CSS для тестирования зависания (то же самое, что я добавил в № 1 выше) и базовое создание и монтирование объектов Vue (которые, я полагаю, вы должны были сгенерировать автоматически). CSS:

     .v-card:hover {
        background-color: red;
    }
    

   В JS:

     new Vue({
        vuetify: new Vuetify(),
    }).$mount('#app')
    

   Наведение также хорошо работает в этом коде (если я правильно понимаю проблему, о которой вы упомянули). Однако я должен упомянуть, что в CSS есть одно отличие от того, что мне пришлось использовать в #1. В #1 использовался пользовательский класс CSS ( <v-card class="imgCard"> ), поскольку v-карты находятся внутри другой v-карты высокого уровня, поэтому я не мог использовать». v-карта», чтобы выделить там только одну вложенную карту-в противном случае они все выделялись бы вместе. Кстати, разве это не та проблема, с которой вы столкнулись случайно?

Итак, в целом, я думаю, что либо в вашем исходном коде есть что-то еще, что вызывает проблему (предполагая, что вы, возможно, упростили ее при написании вопроса), либо я не понял, что вы имеете в виду. В любом случае, я совершенно уверен, что странность в отладчике Vuetify не означает, что с самим кодом что-то не так.