admin管理员组

文章数量:1277901

I am trying to change the class to apply on a Vuetify.js ponent based on whether there is a mouse hover or not:

<v-card
    class="mx-auto"
    width="344"
  >
    <v-hover>
    <v-card-title
      slot-scope="hover"
      :class="`${hover? class1: class2}`">
      <div>
        <span class="headline">Hover</span>              
        </div>
      </div>

    </v-card-title>
    </v-hover>
  </v-card>

The CSS classes simply set the background-color property:

.class1 {
  background-color:red;
}

.class2 {
  background-color:blue;
}

For some reason, this is not working. What am I missing?

Codepen.

I am trying to change the class to apply on a Vuetify.js ponent based on whether there is a mouse hover or not:

<v-card
    class="mx-auto"
    width="344"
  >
    <v-hover>
    <v-card-title
      slot-scope="hover"
      :class="`${hover? class1: class2}`">
      <div>
        <span class="headline">Hover</span>              
        </div>
      </div>

    </v-card-title>
    </v-hover>
  </v-card>

The CSS classes simply set the background-color property:

.class1 {
  background-color:red;
}

.class2 {
  background-color:blue;
}

For some reason, this is not working. What am I missing?

Codepen.

  • javascript
  • vuetify.js
Share Improve this question asked Nov 9, 2018 at 10:20 Billal BEGUERADJBillal BEGUERADJ 22.8k45 gold badges123 silver badges140 bronze badges 2
  • 2 Did you see the error in the console? – Twometer Commented Nov 9, 2018 at 10:23
  • I was trying to provide an MCVE , but you are right, thank you :) – Billal BEGUERADJ Commented Nov 9, 2018 at 10:53
Add a ment  | 

1 Answer 1

Reset to default 7

You miss quotes in your prop class binding and curly braces in your slot-scope prop.

It should be defined like this :

slot-scope="{ hover }"
:class="`${hover? 'class1': 'class2'}`">

Working CodePen

Vuetify Hover Doc

本文标签： javascriptVuetifyjs set CSS class on mouse hover event using vhover componentStack Overflow

版权声明：本文标题：javascript - Vuetify.js: set CSS class on mouse hover event using v-hover component - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741243563a2364445.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。