Im making a Snackbar component that gets activated from CustomEvent, im stuck at changing colours based on type of error, i assume “type”:”success” is wrong
event Code:
<code> var Snackbardata2 = new CustomEvent('Showtext', {'detail': {"snackbarmsg":"fries: "+path+" Value changed to "+val,"type":"success"}})
</code>
<code> var Snackbardata2 = new CustomEvent('Showtext', {'detail': {"snackbarmsg":"fries: "+path+" Value changed to "+val,"type":"success"}})
</code>
var Snackbardata2 = new CustomEvent('Showtext', {'detail': {"snackbarmsg":"fries: "+path+" Value changed to "+val,"type":"success"}})
Event listener:
<code>methods: {
show(message, type = 'success', duration = 10000) {
this.type = type;
this.message = message;
this.visible = true;
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
this.visible = false;
}, duration);
},
},
mounted(){
window.addEventListener('Showtext',
function(data,type) {
this.show(data["detail"]["snackbarmsg"],type["detail"]["type"]);}.bind(this));
}
</code>
<code>methods: {
show(message, type = 'success', duration = 10000) {
this.type = type;
this.message = message;
this.visible = true;
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
this.visible = false;
}, duration);
},
},
mounted(){
window.addEventListener('Showtext',
function(data,type) {
this.show(data["detail"]["snackbarmsg"],type["detail"]["type"]);}.bind(this));
}
</code>
methods: {
show(message, type = 'success', duration = 10000) {
this.type = type;
this.message = message;
this.visible = true;
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
this.visible = false;
}, duration);
},
},
mounted(){
window.addEventListener('Showtext',
function(data,type) {
this.show(data["detail"]["snackbarmsg"],type["detail"]["type"]);}.bind(this));
}
CSS:
<code>computed:{
snackbarClass(){
return{
'w3-green': this.type === 'success',
'w3-red': this.type === 'error',
'w3-yellow': this.type === 'warning',
}
}
</code>
<code>computed:{
snackbarClass(){
return{
'w3-green': this.type === 'success',
'w3-red': this.type === 'error',
'w3-yellow': this.type === 'warning',
}
}
</code>
computed:{
snackbarClass(){
return{
'w3-green': this.type === 'success',
'w3-red': this.type === 'error',
'w3-yellow': this.type === 'warning',
}
}
Is there any way to change colour or CSS in general via custom events in Vue ?
My knowledge of JS is very limited and i am new to Vue 3 so i assume the problem lies with me.
The the only error i keep encountering is: error Unexpected mutation of "type" prop vue/no-mutating-props. Any nudge in the right direction is welcomed.
New contributor
JURE BAJC is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.