Menu
Vuetify buttons keep active state after being clicked. You need to click elsewhere on the screen to remove it. Is there a simple way of adding a timer on returning to inherit state.
I've recently gotten into programming these few last months and just now started using vuetify in my vue project. This issue is something I can solve with unnecessary amounts of code and I'de like to see how you could improve on this.
<v-app-bar app color="#44D0CD" dark>
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>Application</v-toolbar-title>
<v-btn @click="functionOne" light style="">
<v-icon left>mdi-plus</v-icon>
Do something
</v-btn>
<v-btn @click="functionTwo" light content="Save">
Do something else
</v-btn>
</v-app-bar>
I want it to return to the inherit state after a click. Now it stays active on click.
511
To disable button until all validation rules are true with Vuetify and Vue. js, we can bind a reactive property to the form validation result value with v-model on v-form . And then we can use that to conditionally disable the button.
No, you can't run Vuetify without Vue. The reason is pretty simple, most of Vuetify is built with vue and most of those components require their script to run, so everything that's not entirely css based will not work.
v-spacer. v-spacer is a basic yet versatile spacing component used to distribute remaining width in-between a parents child components.
With the VuetifyJs grid system, you can create very powerful responsive layouts without any line of JavaScript code.
Turns out that the ::before pseudo element was being set to a higher opacity when the button component was focused ... a simple solution to this is to give the button a custom class and force the pseudo opacity ... here is a demo :
Vue.config.devtools = false
Vue.config.productionTip = false
new Vue({
el: '#app',
vuetify: new Vuetify(),
}).myClass:focus::before {
opacity: 0 !important;
}<html>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<body>
<div id="app">
<v-app>
<v-content>
<span>with the focus effect:</span>
<v-btn>Button</v-btn>
</v-content>
<v-content>
<span>without the focus effect:</span>
<v-btn class="myClass">Button</v-btn>
</v-content>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
