Question

我有两个元素，它们位于DOM的两个完全不同的部分。而且我正在尝试将两者连接起来，因此，当您将鼠标悬停在一个元素上时，另一个会显示效果。

第一个元素在组件中，并且在组件内部以这样的代码显示在中：

<button @mouseover="$emit( 'event-hovered', event.id )" @mouseout="$emit( 'event-not-hovered' )">
  Button text    
</button>

第二个元素是使用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;
}

可以看出，然后我做了一个@mouseover，将ID传回给他的主要实例。在主要实例中，然后有一个方法可以找到第二个元素。但是我使用常规的javascript来做到这一点，因为在重写createCustomMarker-函数时遇到了问题，因此Vue和AmCharts都能掌握发生的情况。但这意味着我无法将类添加到第二个元素（由createCustomMarker生成），即传统的v-model:class方式。我尝试在主要实例的方法中执行此操作：

eventHovered: function( elementId ){
  let markerWithId = document.getElementById( 'id' + elementId );
  markerWithId.classList.add("event-hovered");
  console.log( markerWithId );
}

当我console.log markerWithId时，我可以看到它具有添加的类（event-hovered）。但这并没有出现在屏幕上，我认为那是因为Vue正在控制DOM。

那么如何将元素提交回DOM？这是这样做的愚蠢方法吗？

Answer 1

在标记上编辑类后，尝试调用validateNow（）函数。如此处所示： https://docs.amcharts.com/3/javascriptcharts/AmCoordinateChart

从文档中：更改任何类的一个或多个属性后，应调用此方法。调用此方法后，图表将重绘。属性，validateData和skipEvents均为可选（默认为false）。

Vue将类添加到没有v-model：class的元素上吗？

1 个答案: