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

我正在使用一个插件，它可以动态地向DOM添加一个带有

s的

（当我点击“#”时是一个下拉菜单）。我想给他们增加一个活动。该事件显示在开发工具中，但单击它们时仍然没有发生任何事情。我做错了什么

---

听起来您只需要阅读……的文档
这样行吗

---

新建：
旧版：

---

我删除了为

console.log（“AAAA”）添加的事件侦听器在
updated（）中
hook。。。我还将以下内容添加到您的
数据
道具中的每个贡品系列中：

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


完整数据道具：

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

data（）{
返回{
isMounted:错，
选项：{
fillAttr:“键”，
收藏：[
{
触发器：“@”，
价值观：[
{key:“CollinHenderson”}，
{key:“SarahDrasner”}，
{key:“EvanYou”}，
{键：“阿达姆瓦坦”}
],
选择模板：（项目）=>{
这个.writeToConsole（'hi@'）；
返回(
"@" +
item.original.key+
“~~检查控制台~~”
);
}
},
{
触发器：“#”，
值：[{key:foo}，{key:bar}，{key:baz}]，
选择模板：（项目）=>{
this.writeToConsole（'hello'）；
返回(
"#" +
item.original.key+
“~~检查控制台~~”
);
}
}
],
noMatchTemplate（）{
return“
未找到匹配项”
；
}
}
};
},
听起来您只需要阅读..的文档

这样行吗


新建：

旧版：


我删除了为
console.log（“AAAA”）添加的事件侦听器在
updated（）中
hook。。。我还将以下内容添加到您的
数据
道具中的每个贡品系列中：

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


完整数据道具：

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

data（）{
返回{
isMounted:错，
选项：{
fillAttr:“键”，
收藏：[
{
触发器：“@”，
价值观：[
{key:“CollinHenderson”}，
{key:“SarahDrasner”}，
{key:“EvanYou”}，
{键：“阿达姆瓦坦”}
],
选择模板：（项目）=>{
这个.writeToConsole（'hi@'）；
返回(
"@" +
item.original.key+
“~~检查控制台~~”
);
}
},
{
触发器：“#”，
值：[{key:foo}，{key:bar}，{key:baz}]，
选择模板：（项目）=>{
this.writeToConsole（'hello'）；
返回(
"#" +
item.original.key+
“~~检查控制台~~”
);
}
}
],
noMatchTemplate（）{
return“
未找到匹配项”
；
}
}
};
},
谢谢，但问题不是日志：）而是单击元素时应触发的方法。但是我不能在数据中触发它（选择模板）。另外，我不能把它的内容放在那里，因为它使用引用。是的，所以在同一个函数中添加该方法
selectTemplate
是一个在您选择一个项目后被触发的回调。这就是我的答案。您可以将任何需要的内容放在那里…..选择项目后触发方法正是您试图使用单击事件处理程序实现的。它内置于插件中。你不必重新创建它。阅读他们的文档。但它既不接受
this.TransferTextAndHighLite（）
nor
this.$refs[“colorDiv”].innerHTML=this.$refs[“transpDiv”].innerHTML
nor
document.getElementById（“colorDiv”）.innerHTML=document.getElementById（“transpDiv”）.innerHTML必须使用箭头函数。。查看我的更新答案，其中有一个测试方法，显示如何使用
this
关键字（以便访问方法）…没问题。我不是——老实说，我只是看了文件。我知道，大多数这样的插件都会为类似的事情提供自己的回调，而且我在使用Vue时（有限）了解到，如果您想保留上下文，并在回调中使用
this
关键字，则必须使用箭头函数。我认为这更像是ES6的“功能”。如果这回答了你的问题，你介意接受我的回答吗？谢谢谢谢，但问题不是日志：）而是单击元素时应触发的方法。但是我不能在数据中触发它（选择模板）。另外，我不能把它的内容放在那里，因为它使用引用。是的，所以在同一个函数中添加该方法
selectTemplate
是一个在您选择一个项目后被触发的回调。这就是我的答案。您可以将任何需要的内容放在那里…..选择项目后触发方法正是您试图使用单击事件处理程序实现的。它内置于插件中。你不必重新创建它。阅读他们的文档。但它既不接受
this.TransferTextAndHighLite（）
nor
this.$refs[“colorDiv”].innerHTML=this.$refs[“transpDiv”].innerHTML
nor
document.getElementById（“colorDiv”）.innerHTML=document.getElementById（“transpDiv”）.innerHTML必须使用箭头函数。。请参阅我的更新答案，以及测试方法