Is it possible to attach multiple functions in V-for?-CodePudding

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 >

    <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?

CodePudding user response：

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 >

    <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>

CodePudding user response：

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 >

    <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>