Reputation: 129
I am trying to change the background colour of an element on click of it using vue but it doesn't change, this is what i have come up with so far, also the onclick method has two functions and I read that this is the best way to input to onclick events in vue.
<div id="exercise">
<div>
<p>Current Value: {{ value }}</p>
<button @click="value += 5(); red();" :style="{ 'background-color': color }">Add 5</button>
<button @click="value += 1">Add 1</button>
<p>{{ result }}</p>
</div>
<div>
<input type="text" v-model="timer">
<p>{{ value }}</p>
</div>
</div>
js
new Vue({
el: "#exercise",
data: {
value: 0,
timer: 1000,
},
methods:{
red() {
this.color = "red";
}
},
computed: {
result: function() {
return this.value >= 37 ? "Not there yet" : "done";
}
},
watch: {
result: function(value) {
var vm = this;
console.log(value);
setTimeout(function() {
vm.value = 0;
}, 5000);
}
}
});
Upvotes: 1
Views: 2643
Reputation: 314
In data you must insert
data: {
value: 0,
timer: 1000,
color: null
},
and try use correct syntax: https://v2.vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1
<button @click="value += 5(); red();" :style="{backgroundColor: color }">Add 5</button>
Upvotes: 3