How can I add an event listener back to a dynamically updated array of div elements in Vue 3?

Question

How can I add an event listener back to a dynamically updated array of div elements in Vue 3?

I need assistance with creating a dynamic array of divs that will apply a class to both the div itself and a child element when hovered over. The array is generated by a computed function, as shown in the following code snippet:


 <article
    v-for="(article, index) in filteredArticles"
    :key="article.id"
    ref="articleRefs"
    :ref-key="index"
    @mouseenter="handleClass(index, 'add')"
    @mouseleave="handleClass(index, 'remove')"
>
    <!-- Content -->
</article

const articleRefs = ref<HTMLDivElement[]>([])
const articleList = ref([] as Article[])

const filteredArticles = computed(() => {
    return activeTag.value !== ''
        ? articleList.value.filter((a) => a.tags.some((t) => t.Tag_id.title === activeTag.value))
        : articleList.value
})

watch(
    filteredArticles.value,
    () => articleRefs.value = []
)

const handleClass = (index: number, action: 'add'|'remove') => {
    const hoveredArticle = articleRefs.value[index]
    hoveredArticle.classList[action]('animate')
    hoveredArticle.querySelector('h2')?.classList[action]('glitch')
}

Initially, everything works fine. However, if an article that was previously filtered out is displayed again, hovering over it does not trigger the desired effect.

I would appreciate any insights on what might be causing this issue. Thank you!

javascript vue.js mouseevent

Answer 1

Answer №1

If you encounter an issue while trying to map the index of your array looping through articles to the index of the refs, be aware that the order may not remain consistent with your data array as per Vue documentation.

It's important to note that the ref array does not guarantee a matching order to the source array.

This mismatch in indexing can lead to problems when utilizing the for loop index along with the refs array index.

Possible Solution

To address this issue, consider separating your data logic from presentation logic by creating a new Vue component called SingleArticle. This approach ensures that Vue manages the update logic seamlessly without manual intervention.

1. Single Article Component

The root class animated is dynamically added based on hover state by the framework
If article content is passed as HTML string, utilize querySelector to apply a class to the specified element inside

<!-- Vue SFC template: -->
<article
  ref="articleRef"
  :class="{ animated: isHover }"
  v-html="content"
  @mouseenter="isHover = true"
  @mouseleave="isHover = false"
/>

// Vue SFC script (or script setup)
import { ref, defineComponent } from 'vue';

export default defineComponent({
  name: 'SingleArticle',
  props: {
    // Include any necessary article props here
    // Example props are provided for demonstration purposes
    content: String,
    // ...
  },
  setup(props) {
    var articleRef = ref<HTMLElement>(null);
    var isHover = ref<boolean>(false);

    watch(isHover, (currIsHover) => {
      const action = currIsHover ? 'add' : 'remove';
      articleRef.value?.querySelector('h2')?.classList[action]('glitch');
    });
    
    return {
      articleRef,
      isHover,
    }
  }
});

2. Implement the New Component within `v-for`

<!-- Inside Vue SFC template -->
<single-article
 v-for="(article, index) in filteredArticles"
 :key="article.id"
 :content="article.content"
/>

// Main component handles filtering logic
// Hovering behavior is encapsulated within the single article component
export default defineComponent({
  setup() {
    const articleList = ref<Article[]>([]);

    const filteredArticles = computed(() => {
      if (!activeTag.value) return articleList.value;

      return articleList.value.filter(
        (a) => a.tags.some((t) => t.Tag_id.title === activeTag.value)
      );
    }
    
    return {
      filteredArticles,
    };
  }
})

Final Considerations

This implementation has not been tested and is purely conceptual.

The proposed solution effectively segregates filter logic from article presentation, resulting in two distinct components that are easily testable and comprehensible. Vue's reactivity ensures seamless updates without additional effort.

Answer 2

If you encounter an issue while trying to map the index of your array looping through articles to the index of the refs, be aware that the order may not remain consistent with your data array as per Vue documentation.

It's important to note that the ref array does not guarantee a matching order to the source array.

This mismatch in indexing can lead to problems when utilizing the for loop index along with the refs array index.

Possible Solution

To address this issue, consider separating your data logic from presentation logic by creating a new Vue component called SingleArticle. This approach ensures that Vue manages the update logic seamlessly without manual intervention.

1. Single Article Component

The root class animated is dynamically added based on hover state by the framework
If article content is passed as HTML string, utilize querySelector to apply a class to the specified element inside

<!-- Vue SFC template: -->
<article
  ref="articleRef"
  :class="{ animated: isHover }"
  v-html="content"
  @mouseenter="isHover = true"
  @mouseleave="isHover = false"
/>

// Vue SFC script (or script setup)
import { ref, defineComponent } from 'vue';

export default defineComponent({
  name: 'SingleArticle',
  props: {
    // Include any necessary article props here
    // Example props are provided for demonstration purposes
    content: String,
    // ...
  },
  setup(props) {
    var articleRef = ref<HTMLElement>(null);
    var isHover = ref<boolean>(false);

    watch(isHover, (currIsHover) => {
      const action = currIsHover ? 'add' : 'remove';
      articleRef.value?.querySelector('h2')?.classList[action]('glitch');
    });
    
    return {
      articleRef,
      isHover,
    }
  }
});

2. Implement the New Component within `v-for`

<!-- Inside Vue SFC template -->
<single-article
 v-for="(article, index) in filteredArticles"
 :key="article.id"
 :content="article.content"
/>

// Main component handles filtering logic
// Hovering behavior is encapsulated within the single article component
export default defineComponent({
  setup() {
    const articleList = ref<Article[]>([]);

    const filteredArticles = computed(() => {
      if (!activeTag.value) return articleList.value;

      return articleList.value.filter(
        (a) => a.tags.some((t) => t.Tag_id.title === activeTag.value)
      );
    }
    
    return {
      filteredArticles,
    };
  }
})

Final Considerations

This implementation has not been tested and is purely conceptual.

The proposed solution effectively segregates filter logic from article presentation, resulting in two distinct components that are easily testable and comprehensible. Vue's reactivity ensures seamless updates without additional effort.

How can I add an event listener back to a dynamically updated array of div elements in Vue 3?

Answer №1

Possible Solution

1. Single Article Component

2. Implement the New Component within `v-for`

Final Considerations

Similar questions

A guide on eliminating repetitions from an array of objects by utilizing the spread operator

Encountering problem: 'Dom7 is undefined' while initializing a Framework7 - Vue application using Webpack

Retrieve information from a MongoDB database and present it on a webpage using Handlebars (hbs) or HTML files in

Tips for retrieving data from an API with AJAX

Breaking down a multidimensional array into individual arrays using Javascript

Can you point me in the direction of the jQuery library link?

Use jQuery to swap out images and witness the image loading in real time

Issue with ESLint: Unexpected token found in JavaScript when converting to a dictionary

Tips for maintaining reactivity in nested object properties in external JavaScript class files without relying on Vue.set()

The passport.use method is failing to invoke in Node.js when utilizing the passport-local strategy

The phonegap page redirection is failing, as the 'location' property of the object does not function correctly

Calculating Two Results for Two Target Elements in Vue.js

Ways to convert a buffered document into an object

I encountered an error while setting up Vue.js on my computer

What is the process for creating two columns with an input box beneath them?

The ExpressJS Req.method TypeError occurs when attempting to read the 'method' property of an undefined object

Selecting a URL from a website

PHP - Determine the value based on the button that was clicked by the user and return either true

Ensure that user-provided text is securely stored within a div element to prevent

exciting command: templateUrl

How can I add an event listener back to a dynamically updated array of div elements in Vue 3?

Answer №1

Possible Solution

1. Single Article Component

2. Implement the New Component within v-for

Final Considerations

Similar questions

A guide on eliminating repetitions from an array of objects by utilizing the spread operator

Encountering problem: 'Dom7 is undefined' while initializing a Framework7 - Vue application using Webpack

Retrieve information from a MongoDB database and present it on a webpage using Handlebars (hbs) or HTML files in

Tips for retrieving data from an API with AJAX

Breaking down a multidimensional array into individual arrays using Javascript

Can you point me in the direction of the jQuery library link?

Use jQuery to swap out images and witness the image loading in real time

Issue with ESLint: Unexpected token found in JavaScript when converting to a dictionary

Tips for maintaining reactivity in nested object properties in external JavaScript class files without relying on Vue.set()

The passport.use method is failing to invoke in Node.js when utilizing the passport-local strategy

The phonegap page redirection is failing, as the 'location' property of the object does not function correctly

Calculating Two Results for Two Target Elements in Vue.js

Ways to convert a buffered document into an object

I encountered an error while setting up Vue.js on my computer

What is the process for creating two columns with an input box beneath them?

The ExpressJS Req.method TypeError occurs when attempting to read the 'method' property of an undefined object

Selecting a URL from a website

PHP - Determine the value based on the button that was clicked by the user and return either true

Ensure that user-provided text is securely stored within a div element to prevent

exciting command: templateUrl

2. Implement the New Component within `v-for`