addEventListener в Vue не запускается, хотя событие появляется в инструментах разработки

Question

Я использую плагин, который динамически добавляет

• в DOM (выпадающее меню, когда я нажимаю '#'). Я пытаюсь добавить к ним событие. Событие отображается в инструментах разработчика, но все равно ничего не происходит, когда я нажимаю на них. Что я делаю не так?

  

Answer 1

Похоже, вам просто нужно прочитать документацию для Tribute / vue-tribute ..

Работает ли что-то подобное?

---

NEW: https://codesandbox.io/s/7mp416jnjq

OLD: https://codesandbox.io/s/8xv5ll6myl

---

Я удалил добавленныйпрослушиватель событий для console.log("AAAA"); в вашем updated() крюке ... Я также добавил следующее в каждую из ваших коллекций дани, внутри вашей data prop:

selectTemplate: (item) => {
  this.writeToConsole('hi@');
  return (
    "@" +
    item.original.key +
    " <h1><b> ~~ Check your console ~~  </b></h1>"
  );
}

---

Добавлен метод тестирования:

methods: {
    writeToConsole(data) {
      console.log(data);
    },
    /* ... more code here */
},

---

Полный набор данных:

  data() {
    return {
      isMounted: false,
      options: {
        fillAttr: "key",
        collection: [
          {
            trigger: "@",
            values: [
              { key: "CollinHenderson" },
              { key: "SarahDrasner" },
              { key: "EvanYou" },
              { key: "AdamWathan" }
            ],
            selectTemplate: (item) => {
              this.writeToConsole('hi@');
              return (
                "@" +
                item.original.key +
                " <h1><b> ~~ Check your console ~~  </b></h1>"
              );
            }
          },
          {
            trigger: "#",
            values: [{ key: "foo" }, { key: "bar" }, { key: "baz" }],
            selectTemplate: (item) => {
              this.writeToConsole('hello');
              return (
                "#" +
                item.original.key +
                "  <h1><b> ~~ Check your console ~~  </b></h1>"
              );
            }
          }
        ],
        noMatchTemplate() {
          return "<li class'noMatches' style='background: #d88686;color: #fff;'>No matches found</li>";
        }
      }
    };
  },