Добавление события мыши в динамически созданный элемент Vuejs

Question

Добавление события мыши в динамически созданный элемент Vuejs

Это распространенное заблуждение, что используемая текущая IDE отвечает за получение ошибок, как указано в вопросе. См., Например,

Проблема почти никогда не связана с используемой в настоящее время средой IDE. В большинстве случаев решение сводится к тому, чтобы предоставить компилятор / компоновщик реального инструментария с соответствующим путем для поиска включенных заголовков, чтобы быть связанными библиотеками.

Один из основных применимых ответов для проблем, связанных с компоновщиком

Что такое неопределенная ссылка / неразрешенная ошибка внешнего символа и как ее исправить?

undefined reference to `WinMain @ 16 '

blockquote>
Большинство общих IDE предоставляют функции для настройки этого для конкретного проекта. Вот несколько примеров

Eclipse-CDT

Включить настройки пути: [/g5]

Library & amp;

Visual Studio 2013

[/g7]

Блоки кода [/g8] [/g9]

** DEV C ++ (Bloodshed C ++)

Как из их FAQ:

9. Как я могу использовать библиотеку OpenGL и другие?

Все библиотеки, которые поставляются с Mingw, находятся в каталоге Lib. Все они названы следующим образом: lib*.a Чтобы связать библиотеку с вашим проектом, просто добавьте опции проекта, Дополнительные файлы параметров: -lopengl32 Это для включения библиотеки libopengl32.a. Чтобы добавить любую другую библиотеку, просто следуйте одному и тому же синтаксису: Тип -l (L в нижнем регистре) плюс базовое имя библиотеки (имя файла без lib и расширение .a).
blockquote>
Вы также можете рассмотреть возможность добавления опции -L для добавления папок каталога для поиска библиотек.

Qt Creator

Чтобы добавить включенные пути, вам нужно откройте файл .pro, а затем добавьте каталоги в переменную INCLUDEPATH. Эти пути разделяются пробелами. Ссылка здесь .

[/g10]

Если ни один из приведенных выше примеров не применяется для вашей фактически используемой среды IDE / toolchain, я надеюсь, что вы сможете получить точку абстракции:

Это вопрос, как предоставить компиляцию / привязку параметров к вашей реальной toolchain. IDE, используемый для настройки контекста, здесь является незначительной.
blockquote>

0

javascript vue.js

задан Muppet 13 July 2018 в 13:31

2 ответа

Попробуйте это. Я внес некоторые изменения в код jsfiddle.

for (let i = 0; i < this.items.length; i++) {
        let bar = document.createElement('div');
      bar.className = this.items[i].colour;
      bar.style.cssText = `width: ${this.items[i].weight}%`;
            // ?
     // bar.setAttribute("mouseover", this.showBlock(500, false));
        document.querySelector('.bar').appendChild(bar);



    }
    var that=this;
    setTimeout(function(){
      document.querySelector('.bar').childNodes.forEach(function(e,y){
        e.addEventListener("mouseover", function(){that.showBlock(500, false)});
      });},100);

работал для меня в jsfiddle

1

ответ дан saiyan 17 August 2018 в 12:44

Другие вопросы по тегам:

javascript vue.js

Похожие вопросы:

score 1 · Accepted Answer

Проблема:

Посмотрим на проблемную строку:

bar.setAttribute("mouseover", this.showBlock(500, false));

Я вижу следующие проблемы:

Сначала он вычисляет возвращаемое значение this.showBlock(500, false), затем устанавливает его в атрибут mouseover. Это значение, скорее всего, undefined, так как ваша функция ничего не возвращает.
Значение не имеет значения, поскольку атрибут mouseover не имеет абсолютно никакого значения в HTML и Vue, что ищет v-on:mouseover или @mouseover.
Vue ищет эти атрибуты / директивы только при инициализации, но вы добавляете элементы после инициализации Vue.

Возможные решения:

A) Убедитесь, что ваша модель Vue доступна как глобальная переменная (например, window.app), затем вы можете выполнить трюк с атрибутом HTML onmouseover и строкой вызова функции:

bar.setAttribute("onmouseover", "app.showBlock(500, false)");

B) Добавить прослушиватель событий вместо атрибута. Что-то вроде этого:

bar.addEventListener("mouseover", function () { app.showBlock(500, false); });

Это также требует, чтобы ваш экземпляр Vue был доступен.

См. Полное решение в ответе @ saiyan .

C) Поскольку вы не делаете ничего, что Vue не может сделать, вы можете (и я советую вам) использовать Vue для создания ваших элементов. На мой взгляд, это точка Vue, чтобы облегчить боль создания и модификации элементов. На основе вашего цитированного цикла for реализация Vue будет выглядеть так (в вашем HTML):

<div class="bar">
  <div v-for="i in items" :class="i.colour" :style="{ width: i.weight + '%' }" @mouseover="showBlock(500, false)"></div>
</div>

Для полного решения, пожалуйста, ознакомьтесь с @ скриптой Берта .