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

Posted 2023-02-22

【中文标题】是否可以在 V-for 中附加多个功能？

【英文标题】：Is it possible to attach multiple functions in 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>

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

【参考方案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>