How can I use Intersection Observer in Vue.js for multiple elements?

How can I use Intersection Observer in Vue.js for multiple elements?

You can use the Intersection Observer API to observe multiple elements in Vue.js by creating a directive or a component that handles the observer.

Can you show me a code example of how to implement this?

Sure! Here's a simple example:

export default {
  directives: {
    observe: {
      bind(el, binding) {
        const observer = new IntersectionObserver((entries) => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              binding.value(entry);
            }
          });
        });
        observer.observe(el);
      },
      unbind(el) {
        observer.unobserve(el);
      }
    }
  }
};

You can use this directive in your template to observe multiple elements.

What if I want to trigger different actions for different elements?

You can pass different callback functions to the directive for each element. Just bind the specific action you want to trigger when that element intersects.