Vue將類添加到沒有v-model：class的元素中？

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 -function時遇到了問題，因此Vue和AmCharts都能掌握發生的情況。 但這意味着我無法將類添加到第二個元素（由createCustomMarker生成）中，即常規的v-model:class -way。 我嘗試在主要實例的方法中執行此操作：

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）。