new Vue({
el: '#app',
data: {
turnRed: false,
turnGreen: false,
turnBlue: false
},
computed:{
switchRed: function () {
return {red: this.turnRed}
},
switchGreen: function () {
return {green: this.turnGreen}
},
switchBlue: function () {
return {blue: this.turnBlue}
}
}
});.demo{
width: 100px;
height: 100px;
background-color: gray;
display: inline-block;
margin: 10px;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.js"></script>
<div id="app">
<div class="demo" @click="turnRed = !turnRed" :class="switchRed"></div>
<div class="demo" @click="turnGreen = !turnGreen" :class="switchGreen"></div>
<div class="demo" @click="turnBlue = !turnBlue" :class="switchBlue"></div>
</div>computed:{
switchRed: () => {
return {red: this.turnRed}
},
switchGreen: () => {
return {green: this.turnGreen}
},
switchBlue: () => {
return {blue: this.turnBlue}
}
}Write your answer...
Suppose I have a Vue.js component like this: And I want to use it when some route in vue-router is matched like this: Normally in order to pass 'myProps' to the component I would do something like
Aditya Agrawal
Tools & Libraries
Asked • Jul 6 2019
My vue component is like this : When executed, there exist error like this : Vue template syntax error: id="purchase-{{ item.id }}": Interpolation inside attributes has been removed. Use v-bind or
Prasad Patil
General
Asked • Jun 1 2019