How can I implement dynamic event handling in Vue.js when using a dynamic list of elements?

I have a list of items, each represented by a component, and I want to attach a unique event listener to each item in the list. The event listener should perform a specific action based on the item's unique data.

The issue I am facing is that I am not able to bind the event listener to the specific item using v-on directive, as the list is generated dynamically and the number of items can change. I have tried using v-for with v-on, but it attaches the same event listener to all the items in the list.

I have also researched using $listeners and $attrs, but I am not sure if that is the best solution for my use case.

Here is an example of my current code:

<template>
  <div>
    <item-component v-for="item in items" :key="item.id" v-on="uniqueEventListeners(item)" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: "item 1" },
        { id: 2, name: "item 2" },
        { id: 3, name: "item 3" }
      ]
    };
  },
  methods: {
    uniqueEventListeners(item) {
      return {
        click: () => {
          console.log(`Clicked on item with id: ${item.id}`);
        }
      };
    }
  }
};
</script>

What is the best way to achieve dynamic event handling with a dynamic list of items in Vue.js? And also how can I make sure that the event is unique for each item.

CodePudding user response：

You can do something like this:

<template>
  <div>
    <item-component v-for="item in items" :key="item.id" :data-id="item.id" v-on="item.events" />
  </div>
</template>

<script>
export default 
{
  data() 
  {
    return {
      items: [
        { 
          id: 1, 
          name: "item 1", 
          events:
          {
            click: this.handleClick,
            mouseenter: this.handleMouseEnter,
            mousemove: this.handleMouseMove,
          }
        },
        { 
          id: 2, 
          name: "item 2", 
          events:
          {
            click: this.handleClick,
          }
        },
        { 
          id: 3, 
          name: "item 3", 
          events:
          {
            mousemove: this.handleMouseMove,
          }
        },
      ]
    };
  },
  methods: 
  {
    handleClick(event) 
    {
      console.log("CLICK", event.target.dataset.id);
    },
    handleMouseEnter(event) 
    {
      console.log("MOUSE ENTER", event.target.dataset.id);
    },
    handleMouseMove(event) 
    {
      console.log("MOUSE MOVE", event.target.dataset.id);
    },
  }
};
</script>

You should make sure that your item-component is emitting the events that you're listening for.