I am faced with the challenge of connecting two elements that are located in different areas of the DOM. The goal is to create a hover effect on one element when the other is interacted with.
The first element is within a component and is rendered using the following code inside the component:
<button @mouseover="$emit( 'event-hovered', event.id )" @mouseout="$emit( 'event-not-hovered' )">
Button text
</button>
The second element is dynamically generated through code from an AmCharts demo:
createCustomMarker: function (image) {
var element = document.createElement('button');
element.className = 'map-marker the-id-' + image.id;
element.title = image.title;
element.style.position = 'absolute';
element.dataset.target = "#id" + image.id;
element.setAttribute('data-toggle', 'modal');
image.chart.chartDiv.appendChild(element);
return element;
}
In order to achieve the desired effect, I have implemented a @mouseover event that sends the id back to the main instance. In the main instance, I utilize JavaScript to locate the second element since directly interacting with Vue has proved problematic. However, this approach restricts me from applying classes to the dynamically generated second elements using the conventional v-model:class. A method in the main instance was attempted:
eventHovered: function( elementId ){
let markerWithId = document.getElementById( 'id' + elementId );
markerWithId.classList.add("event-hovered");
console.log( markerWithId );
}
Upon logging markerWithId, the added class (event-hovered) is visible. Yet, it fails to reflect on the screen due to Vue controlling the DOM structure.
Therefore, the question arises - how can I properly manipulate the element within the DOM? Is there a more efficient way to accomplish this task?