回圈遍歷物件陣列時，如何在每個物件上獲得不同的onclick事件VUE3

我有一個使用 v-for 和 props 回圈的組件。我希望每個呈現的組件都有不同的點擊事件，但我不知道如何將函式作為道具傳遞。

代碼：

零件：

<template>
    <div v-on:click="cardProperties.scrollFunction" :id="cardProperties.id" class="flex text-text-color justify-around text-center bg-container-color h-1/6 w-2/12 rounded-3xl shadow-lg m-4 cursor-pointer ease-in-out duration-500 hover:bg-container-hover-color opacity-95">
        <div class="py-6">
            <h2>{{cardProperties.title}}</h2>
            <font-awesome-icon class="h-12 my-4" :icon="cardProperties.icon" />
            <p>{{cardProperties.text}}</p>
        </div>
    </div>
  </template>
  
  <script>
  
  
  export default {
    name: 'card-container',
    components: {
    },
    props: {
      cardProperties: Object,
    },
    data() {
        return{
            cardProps: this.cardProperties
        }
    },
    methods: {
       musicScroll() {
        const musicDiv = document.getElementById("music");
        if(musicDiv != null){
          musicDiv.scrollIntoView({behavior: 'smooth'})
        }
      },
      maoScroll() {
        const maoDiv = document.getElementById("mao");
        if(maoDiv != null){
          maoDiv.scrollIntoView({behavior: 'smooth'})
        }
      },
    },
  }
  </script>

應用程式.vue：

<card 
    v-for="cardProperties in cardPropsArray"
    v-bind:key="cardProperties.text"
    :cardProperties = cardProperties
    />

...

cardPropsArray:[
        {
          id: "music",
          scrollFunction: "musicScroll()",
          title: "Musik",
          icon: "fa-solid fa-music",
          text: "/play"
        },
        {
          id: "mao",
          scrollFunction: "maoScroll()",
          title: "Med Andra Ord",
          icon: "fa-solid fa-hourglass-end",
          text: "/MAO"
        },

我試圖將“scrollFunction”作為道具傳遞，但由于它將道具作為字串發送，因此它不起作用。它會導致錯誤訊息：“TypeError：$props.cardProperties.scrollFunction 不是函式”

uj5u.com熱心網友回復：

在card-container組件內部發出一個以函式名稱作為引數的事件：

    <div v-on:click="$emit('call-method',cardProperties.scrollFunction)" :id="cardProperties.id" class="flex ...">
        <div class="py-6">
            <h2>{{cardProperties.title}}</h2>
            <font-awesome-icon class="h-12 my-4" :icon="cardProperties.icon" />
            <p>{{cardProperties.text}}</p>
        </div>
    </div>

在 parent 中定義發出的事件處理程式并使用 [] 訪問器呼叫方法，例如this[funcName]()：

<card 
    v-for="cardProperties in cardPropsArray"
    v-bind:key="cardProperties.text"
    :cardProperties = cardProperties

   @call-method="run"
    />
...
<script>
cardPropsArray:[
        {
          id: "music",
          scrollFunction: "musicScroll",
          title: "Musik",
          icon: "fa-solid fa-music",
          text: "/play"
        },
        {
          id: "mao",
          scrollFunction: "maoScroll",
          title: "Med Andra Ord",
          icon: "fa-solid fa-hourglass-end",
          text: "/MAO"
        },
... 

methods:{
  run(funcName){
   this[funcName]();
 },
....
}
</script>

uj5u.com熱心網友回復：

您可以通過省略引號使函式成為物件屬性！帶有引號的它始終是一個字串：

{
  id: "music",
  scrollFunction: musicScroll,
  title: "Musik",
  icon: "fa-solid fa-music",
  text: "/play"
}

標籤：javascriptvue.jsvue组件vue.js3vue-道具

上一篇：系結動態組件

下一篇：在多個組件上合并香草事件偵聽器的最佳方法