是否可以在 V-for 中附加多个功能？答案

【问题标题】：Is it possible to attach multiple functions in V-for?是否可以在 V-for 中附加多个功能？
【发布时间】：2022-01-16 03:13:44
【问题描述】：

我有一个元素数组，我需要将这些元素渲染到一个 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>

上面的方法我试过了，还是不行，请问有什么办法吗？

【问题讨论】：

标签： javascript vue.js vuejs2 vuejs3 v-for

【解决方案1】：

这对您不起作用，因为每个对象中的每个 clickFunction 属性都是一个字符串。 @click 属性应该与常规旧字符串做什么？试试

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

【讨论】：

【解决方案2】：

我认为您想监听每个项目的 onclick。因此，您只需为所有声明一个方法或函数，并将每个项目的键值作为参数传递。然后，使用 switch 语句或 if 语句来检测单击了哪个选项。我已将您的代码更改如下：

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

【讨论】：