CODEWITHSUNDEEP
vue.jsvue-componentvuetify.js
Mandemon
Mandemon

Reputation: 422

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

Okay, so I am trying to setup a simple grid layout with three v-cards at equal distances.

<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>

Now, according to the docs and examples they have this should leave me with 3 cards at equal distances, and it does indeed.

Problem is that moment I hover over any of them, they all darken. Looking through the dev tools reveals following issue:

Image of layout

As you can see, the v-cards are not inside v-cols as they should be. Yet, I can't see any errors in the code. Am I missing some extra rule or something?

Upvotes: 2

Views: 1035

Answers (1)

Denis P
Denis P

Reputation: 796

I believe the problem with darkening on hover should be elsewhere and is not related to the oddity that you see in the Vue debugger. I don't think there is something wrong with your code (compare it to what I mention in #1 below). I tend to believe that the oddity in the debugger is either its own bug or a bug (or feature?) related to how the debugger reflects the Vuetify internals, which doesn't spoil the real app behavior. Here are my arguments:

  1. Look at 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: the screenshot This, however, doesn't spoil the DOM model, where the v-cards are inside of v-cols as expected: DOM model This also doesn't create any problems with the actual app behavior. Changing background color at hover (I added that simple CSS change to Vuetify original example just to try to reproduce your original problem) works like a charm. Note that red background in one card of the screenshot - it spreads to the single hovered card only.

  2. I remember seeing the same Vuetify hierarchy oddity in Vue debugger in the past, though it didn't create any problems and didn't seem to be caused by any bugs in the code. I just ignored it at that time.

  3. I also copied your example into a codepen adding just two basic things: the CSS to test hovering (the same as I added in #1 above) and the basic Vue object creation and mounting (which I'd suppose you should have auto-generated). The CSS:

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

    The JS:

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

    The hovering also works well in that codepen (if I understand correctly the kind of problem you mentioned). I should mention there is one difference in CSS to what I had to use in #1, though. In #1 a custom CSS class (<v-card class="imgCard">) was used as v-cards are inside of another high-level v-card there, so I couldn't use '.v-card' to highlight just one nested card there - they would all highlight together otherwise. BTW, isn't that the problem you experience by chance?

So overall, I think that either your original code has something else that causes the problem (presuming you might have simplified it when writing the question), or I didn't get what kind of hovering you mean. Anyways, I'm quite certain that the oddity in Vuetify debugger doesn't mean there is something wrong with the code itself.

Upvotes: 2

Related Questions