尽管放置在那里，但 Vuetify v-card 不在 v-col 内

Question

好的，所以我正在尝试设置一个简单的网格布局，其中三个 v-card 的距离相等。

<v-main>
  <v-container>
    <v-row> 
      <v-col>
       <v-card outlined tile>Card 1</v-card>
      </v-col>
      <v-col>
       <v-card outlined tile>Card 2</v-card>
      </v-col>
      <v-col>
       <v-card outlined tile>Card 3</v-card>
      </v-col>
    </v-row>
  </v-container>
</v-main>

现在，根据 the docs and examples they have 这应该给我留下 3 张等距离的卡片，确实如此。

问题是当我将鼠标悬停在任何上方时，它们都变暗了。查看开发工具会发现以下问题：

如您所见，v-cards 不是在 v-cols 中，因为它们应该如此。然而，我看不到代码中的任何错误。我是否遗漏了一些额外的规则或其他什么？

Answer 1

我相信悬停时变暗的问题应该出在其他地方，与您在 Vue 调试器中看到的异常情况无关。我认为您的代码没有问题（将其与我在下面的#1 中提到的内容进行比较）。我倾向于认为调试器中的奇怪之处要么是它自己的错误，要么是与调试器如何反映 Vuetify 内部结构相关的错误（或功能？），这不会破坏真正的应用程序行为。这是我的论点：

查看 Vuetify grid with cards example - it is structured the same way as your example (ignore their 'cols' attribute of v-col tag - they showcase an uneven spread of columns, and if you remove that attribute you get pretty much your own example with 3 cards, each inside of its own v-col). However, if you try to copy-paste this standard Vuetify example into an empty Vue CLI app and look into the debugger you see the same odd hierarchy. Check my screenshot: This, however, doesn't spoil the DOM model, where the v-cards are inside of v-cols as expected: 这也不会对实际的应用程序行为造成任何问题。在悬停时更改背景颜色（我将简单的 CSS 更改添加到 Vuetify 原始示例只是为了尝试重现您的原始问题）就像一个魅力。请注意，屏幕截图中的一张卡片中的红色背景 - 它仅传播到单个悬停的卡片。
我记得以前在 Vue 调试器中看到过同样的 Vuetify 层次结构怪事，尽管它没有造成任何问题，而且似乎不是由代码中的任何错误引起的。当时就直接忽略了
我也复制了你的例子 into a codepen 只添加了两个基本的东西：CSS 来测试悬停（与我在上面#1 中添加的相同）和基本的 Vue对象创建和安装（我想你应该自动生成）。 CSS:
```
 .v-card:hover {
     background-color: red;
 }
```
JS：
```
 new Vue({
     vuetify: new Vuetify(),
 }).$mount('#app')
```
悬停在该代码笔中也能很好地工作（如果我对您提到的问题的理解正确的话）。不过，我应该提到 CSS 与我在 #1 中必须使用的内容有一个区别。在 #1 中，自定义 CSS class (<v-card class="imgCard">) 被用作 v-cards 在另一个高级 v-card 里面，所以我不能使用 '.v- card' 只突出显示其中的一张嵌套卡片 - 否则它们会一起突出显示。顺便说一句，这不是你偶然遇到的问题吗？

所以总的来说，我认为要么你的原始代码有其他导致问题的东西（假设你在写问题时可能已经简化了它），要么我没有明白你的意思。无论如何，我很确定 Vuetify 调试器中的奇怪并不意味着代码本身有问题。

尽管放置在那里，但 Vuetify v-card 不在 v-col 内

Vuetify v-card not inside v-col despite being placed there

vue.js

vue-component

vuetify.js