V-for에서 여러 기능을 연결할 수 있습니까?

V-for에서 여러 기능을 연결할 수 있습니까?

요소 배열이 있으므로 해당 요소를 div에 렌더링하고 각 요소에 다른 클릭 기능을 추가해야 합니다.

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

위의 방법을 시도해 봤지만 효과가 없습니다만, 어떻게 할 수 있을까요?

각 객체의 각 clickFunction 속성은 문자열이기 때문에 이 방법은 사용할 수 없습니다.@click Atribute는 보통 오래된 문자열에서 무엇을 할 예정입니까?해라

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

각 아이템의 클릭을 듣고 싶은 것 같습니다.따라서 모든 메서드 또는 함수를 1개만 선언하고 각 항목의 키 값을 매개 변수로 전달해야 합니다.그런 다음 switch 문 또는 if 문을 사용하여 어떤 옵션을 클릭했는지 검출합니다.코드를 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>

언급URL : https://stackoverflow.com/questions/70321258/is-it-possible-to-attach-multiple-functions-in-v-for