Currently i have this code which seems to work:
<button class="initial" :class="{'is-active': activeTab === 1}" name="button">START</button>
However when i click on the button, it doesn't apply the is-active class and remains the styled in initial class. Could anyone help?
i provide an example like yours, it works fine, i think the property activeTab is a string, and when you try to use strict equality that retuns false
<button class="initial" :class="{'is-active': activeTab === 1}" name="button" @click="activeTab=1">START</button>
check this :
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data: {
activeTab: 0
},
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<div id="app" class="container">
<button class="btn" :class="{'btn-primary':activeTab===1}" @click="activeTab=1">START</button>
</div>
Despite the core API, I don't like to create an object to use a single dynamic class, I created this small lib, v-stylish
Take a look in how simple is to toggle a class with it:
Vue.use(vStylish.default);
new Vue({
el: '#app',
data: function() {
return {
isActive: false
};
},
methods: {
toggleState: function() {
this.isActive = !this.isActive;
}
}
});button.is-active {
background-color: lightblue;
border: green solid 2px;
color: red;
}<script src="https://unpkg.com/[email protected]/dist/vStylish.umd.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
<button
v-class:is-active="isActive"
@click="toggleState">
Toggle state
</button>
</div>See it in action - https://codepen.io/stephanieschellin/pen/WaZvPR
<div id="app">
<button
v-bind:class="{ 'i-am-active': button_active_state }"
v-on:click="button_active_state = !button_active_state"
name="button"
>START</button>
</div>
new Vue({
el: '#app',
data: {
button_active_state: false
}
});
.i-am-active {
color: orange;
}
In Vuejs if your data variable is Boolean using true/false you can leverage the ! modifier to toggle its value between true and false.
v-on:click="button_active_state = !button_active_state"
This allows you to avoid having call a method to perform the conditional check and modify the true/false value. Everything needed to toggle the value is baked into Vue.
For a more in depth example see - https://www.tutorialsplane.com/vue-js-toggle-class-click/
<template>
<button :class="{'initial': activeTab !== 1, 'is-active': activeTab === 1}" name="button" @click="setActiveTab">START</button>
</template>
<script>
export default {
data () {
return {
activeTab: 0
}
},
methods: {
setActiveTab(){
let _this = this; //just for context change,
//this can be ignored if you make //this function an arrow
//or bind the function
_this.activeTab = 1;
}
}
}
</script>
<style>
.is-active{
background-color: red;
}
.initial{
background-color: purple;
}
</style>This is simply because, your initial class is always set regardless, and supersedes the styling of the is-active class. in the code above, the initial class is only set when active tab is not ==1; thus, allowing the is-active class to take effect, when it's required condition is met.
There are also other ways to achieve dynamic classes in vue: vue docs dynamic classes
