Basic question but still I cannot figure out how to add an extra class based on @click. I still get error: Cannot read property 'add' of undefined"
methods: {
hideItems() {
document.getElementsByClassName('sold').classList.add('hide')
}
}
You can add the :class="{ hide: hidden }" property on your element, where hidden is a boolean property of the Vue component. This will toggle the hide class on the element.
new Vue({
el: "#app",
data() {
return {
hidden: false,
};
},
methods: {
toggle() {
this.hidden = !this.hidden;
},
},
});.hide {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button @click="toggle">
Toggle visibility
</button>
<div :class="{ hide: hidden }">
Hello
</div>
</div>
getElementsByClassName return HTMLCollection so you need to loop through that collection.
that should do it:
methods: {
hideItems() {
const items = document.getElementsByClassName('sold');
for(item of items){
item.classList.add('hide');
}
}
}
