Vue.js toggle class on click
You could have the active class be dependent upon a boolean data value:
<th
class="initial "
v-on="click: myFilter"
v-class="{active: isActive}">
<span class="wkday">M</span>
</th>
new Vue({
el: '#my-container',
data: {
isActive: false
},
methods: {
myFilter: function() {
this.isActive = !this.isActive;
// some code to filter users
}
}
})
Toggle class on click in VueJS
You need to catch the event handler in the method and using that you can refer to the callee i.e. anchor object in this case.
See the fiddle : https://jsfiddle.net/s9r4q0gc/2/
activeLink(event) {
if(event.target.className == "noclass")
{
event.target.className = "link active";
}
else
{
event.target.className = "noclass";
}
}
UPDATED:
May be try this fiddle and see if it is hitting the bulls eye : https://jsfiddle.net/s9r4q0gc/4/
var app = new Vue({
el: '#app',
data: {
isActive: false
},
methods: {
activeLink(event) {
var checkboxes = document.getElementsByClassName ("noclass");
for (var i=0; i<checkboxes.length; i++) {
checkboxes[i].className = "link active";
//checkboxes[i].className = "link";
}
event.target.className = "noclass";
}
}
})
Vuejs toggle class to the body on button click in a components
You can emit an event inside your header and maybe catch it in the mounted of app component like this:
In your sidebar or other component:
on_some_btn_click: function (){
this.$emit('toggle_root_class');
}
In your app component:
mounted: function(){
var _this = this;
this.$on('toggle_root_class', function(){
_this.active = !_this.active;
});
}
Vue may restrict event from being observed in sibling components. So I use EventBus in my projects to handle sending events easily.
toggle class on click Vue3
isOpen is a ref, so you have to unwrap it with .value:
<script setup>
import { ref } from 'vue';
let isOpen = ref(false);
// isOpen = !isOpen; ❌
isOpen.value = !isOpen.value; ✅
</script>
demo 1
Alternatively, you could use the Reactivity Transform to avoid having to unwrap:
<script setup>
//import { ref } from 'vue';
//let isOpen = ref(false);
let isOpen = $ref(false); ✅
isOpen = !isOpen;
</script>
demo 2
Vue.js toggle class on click with v-for
Here is the small example to acheive you want. This is just a alternative not exact copy of your code.
var app = new Vue({el:'#app',data: { dynamicItems: [ {id:1,name:'Niklesh',selected:false}, {id:2,name:'Raut',selected:false} ], selectedAll:false,},methods: { toggleAll(){ for(let i in this.dynamicItems){ this.dynamicItems[i].selected = this.selectedAll; } }}});.active{ color:blue; font-size:20px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.9/vue.js"></script><div id="app"><template><input type="checkbox" v-model="selectedAll" @change="toggleAll"> Toggle All <div v-for="(item, i) in dynamicItems"> <div :class='{active:item.selected}'><input type="checkbox" v-model="item.selected">Id : {{item.id}}, Name: {{item.name}}</div></div>{{dynamicItems}}</template></div>Vue.js: toggle class onclick
Data needs to be a function in a component.
export default {
name: 'my-component',
data(){
return {
static: true,
isActive: true
}
}
}
Toggle class(or change style) of element when element in clicked, Vuejs
If I understood you correctly try like following snippet:
const app = Vue.createApp({
data() {
return {
tweets: [{id: 1, tweet_id: 1, isSelected: true, tweet_text: 'aaa', tweetReplies: [{tweet_id: 11, tweet_text: 'bbb'}, {tweet_id: 12, tweet_text: 'ccc'}]}, {id: 2, tweet_id: 2, isSelected: false, tweet_text: 'ddd', tweetReplies: [{tweet_id: 21, tweet_text: 'eee'}, {tweet_id: 22, tweet_text: 'fff'}]}],
tweetActionIds: [],
}
},
methods: {
markTweet(tweetId, i) {
const idIndex = this.tweetActionIds.indexOf(tweetId)
this.tweets[i].isSelected = !this.tweets[i].isSelected
if (this.tweetActionIds.includes(tweetId)) {
this.tweetActionIds.splice(idIndex, 1)
} else {
this.tweetActionIds.push(tweetId)
}
},
markReply(replyId) {
const idIndex = this.tweetActionIds.indexOf(replyId)
if (this.tweetActionIds.includes(replyId)) {
this.tweetActionIds.splice(idIndex, 1)
} else {
this.tweetActionIds.push(replyId)
}
},
checkReply(r) {
return this.tweetActionIds.includes(r) ? true : false
}
},
})
app.mount('#demo').selected {color: red;}<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<div class="container-full">
<div class="tweets-container">
<div v-for="(tweet, i) in tweets" :key="tweet.id">
<div
class="tweet-card"
:class="{ selected: tweet.isSelected }"
@click="markTweet(tweet.tweet_id, i)"
>
<div class="text">
<p v-html="tweet.tweet_text">
{{ tweet.tweet_text }}
</p>
</div>
</div>
<div class="replies">
<div
v-for="(reply, index) in tweet.tweetReplies"
:key="reply.tweet_id"
@click="markReply(reply.tweet_id, index)"
>
<div class="tweet-card tweet-reply">
<div class="text" :class="{selected: checkReply(reply.tweet_id)}">
<p>{{ reply.tweet_text }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{tweetActionIds}}
</div>Toggle class on click directive?
You can use a custom directive and attaching to the click event there (in the bind hook).
EDIT: modified to use the element data context to store the class active flag
Just a quick example:
Vue.directive("toggle-active", {
bind: function(el, binding, vnode) {
el.addEventListener(
"click",
() => {
let active = vnode.context.class_active;
active = !active;
vnode.context.class_active = active;
if (!active) {
el.classList.remove("active");
el.classList.add("not-active");
} else {
el.classList.remove("not-active");
el.classList.add("active");
}
},
false
);
}
});
Related Topics
How to Wrap or Truncate Long Strings in a Material-Ui Expansionpanelsummary
How to Make a Floated Div 100% Height of Its Parent
Font Scaling Based on Width of Container
Can a CSS Class Inherit One or More Other Classes
Using Regular Expression in Css
Any Way to Declare a Size/Partial Border to a Box
How to Make Flexbox Items the Same Size
Bootstrap 4 Navbar With 2 Rows
Mvc4 Stylebundle Not Resolving Images
Angular Material Mat-Drawer in Full Height Flex, Content Overflow Auto
How to Make an Svg Scale With Its Parent Container
Chrome/Safari Not Filling 100% Height of Flex Parent
Complex CSS Selector For Parent of Active Child
When to Use Margin VS Padding in Css
What Is a User Agent Stylesheet
Why Don't :Before and :After Pseudo Elements Work With 'Img' Elements