I want to know can we simplify the use of data and method here so we don't need to define it one by one like this? Can we use an iteration or other ways?
export default {
data() {
return {
key1 = false,
key2 = false,
key3 = false,
.....
}
},
methods:{
onClick1 () {
key1 = true
},
onClick2 () {
key2 = true
},
onClick3 () {
key2 = true
},
.....
},
.....
}
On the component
<myComp @click="onClick1">One</myComp>
<myComp @click="onClick2">Two</myComp>
<myComp @click="onClick3">Three</myComp>
.....
Any help would be very helpful, thanks in advance!
Define a keys object in data and a generic function onClick in methods to set a certain key's value to true:
export default {
data() {
return {
keys: { 1: false, 2: false, 3: false }
}
},
methods:{
onClick (key) {
this.keys[key] = true
}
}
}
In the component, pass the key as follows:
<myComp @click="() => onClick(1)">One</myComp>
<myComp @click="() => onClick(2)">Two</myComp>
<myComp @click="() => onClick(3)">Three</myComp>
First, the data property return an object, so you cant define variables there.
data() {
return {
key1: false,
key2: false,
key3: false,
...
}
}
In some cases you can change data directly on click events like:
<myComp @click="key1 = true">One</myComp>
<myComp @click="key2 = true">Two</myComp>
<myComp @click="key3 = true">Three</myComp>
It is not THE best practice, but it is helpful in some cases.
In most cases you need to use callbacks like the example made by "Majed Badawi" here.
You can take an array and loop through that as below.
Note: use this.$set to update the array value in dom as well.
new Vue({
el: '#app',
data() {
return {
keys: [false, false, false, false, false]
}
},
methods: {
onClick(index) {
this.$set(this.keys, index, true)
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
<div v-for="(item,index) in keys" @click="() => onClick(index)">Index-{{index}}</div>
<pre> {{keys}}</pre>
</div>