I have an array of elements, I need to render those elements in to a div and attach different on-click functions to each.
<template>
<div class="container">
<div v-for="option in options" :key="option.id" @click="option.clickFunction">.
{{option}}
</div>
</div>
</template>
<script>
export default{
data(){
return{
options: [
{
id: 1,
text: "option 1",
clickFunction: "function1",
},
{
id: 2,
text: "option 2",
clickFunction: "function2",
},
{
id: 3,
text: "option 3",
clickFunction: "function3",
},
{
id: 4,
text: "option 4",
clickFunction: "function4",
},
{
id: 5,
text: "option 5",
clickFunction: "function5",
},
],
}
}
methods:{
//defining all click functions
}
}
</script>
I have tried the above approach but its not working, is there any way of doing this?
This isn't working for you because each clickFunction property in each object is a string. What is the @click attribute supposed to do with a regular old string? Try
<template>
<div class="container">
<div v-for="option in options" :key="option.id" @click="option.clickFunction">
<!-- I'm guessing you meant option.text here -->
{{option.text}}
</div>
</div>
</template>
<script>
export default{
data(){
return{
// pass functions around instead of strings!
options: [
{
id: 1,
text: "option 1",
clickFunction: this.myUniqueClickHandler,
},
{
id: 2,
text: "option 2",
clickFunction: this.myOtherUniqueClickHandler,
},
// etc.
],
}
}
methods:{
myUniqueClickHandler() {
// ...
},
myOtherUniqueClickHandler() {
// ...
}
}
}
</script>
I think you want to listen for each item's onclick. So, you need to declare only one method or function for all, and pass the key value of each item as a parameter. Then, use a switch statement or if statement to detect which option is clicked. I have changed your code as bellow:
<template>
<div class="container">
<div v-for="option in options" :key="option.id" @click="myFunction(option.id)">.
{{option}}
</div>
</div>
</template>
<script>
export default{
data(){
return{
}
}
methods:{
myFunction(id) {
switch (id) {
case 1:
// option 1 is clicked
break;
case 2:
// option 2 is clicked
break;
case 3:
// option 3 is clicked
break;
case 4:
// option 4 is clicked
break;
default:
break;
}
}
}
}
</script>