尽管事件在开发工具中显示，但Vue中的addEventListener未触发

Question

我正在使用一个插件，该插件会向DOM中动态添加一个带有

的

（当我点击“＃”时，会出现一个下拉菜单）。我正在尝试向他们添加一个事件。该事件显示在开发工具中，但是当我单击它们时仍然没有任何反应。我在做什么错了？

Answer 1

听起来像Tribute/vue-tribute的文档。

类似的东西行吗？

---

新：https://codesandbox.io/s/7mp416jnjq

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

---

我在您的console.log("AAAA");钩子中删除了为updated()添加的事件监听器...我还在您的data道具内向您的每个致敬集合添加了以下内容：

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>";
        }
      }
    };
  },