时间戳

首页 > 解决方案 > 使用 Vue.js 进行 HTML 注入后的事件处理

vue.js - 使用 Vue.js 进行 HTML 注入后的事件处理

问题描述

Vue 没有为 HTML 注入对象注册事件处理程序。我该如何手动执行此操作，或者有什么更好的方法来解决我的问题？

具体来说，我向我的服务器发送一个查询以查找文本中的标记并返回该标记的上下文（周围文本），因为它以非结构化自然语言存在。服务器还检查上下文并找到恰好在我的令牌集中的那些单词的列表。

当我呈现到我的页面时，我希望列表中所有这些找到的标记都是可点击的，以便我可以将该标记的文本作为新的搜索查询发送。我遇到的最大问题是我的问题不符合模板。可点击的文本在数量和位置上有所不同。

我所说的一个例子是我的回报可能看起来像：

{
   "context": "When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected",
   "chunks": ['human events', 'one people', 'political bands']
}

我正在寻找的结果输出是在伪代码中看起来像这样的句子：

When in the Course of <a @click='search("human events")'>human events</a>, it becomes necessary for <a @click='search("one people")'>one people</a> to dissolve the <a @click='search("political bands")'>political bands</a> which have connected

这是我迄今为止尝试过的，尽管点击处理程序没有注册并且函数永远不会被调用：

<v-flex xs10 v-html="addlink(context.context, context.chunks)"></v-flex>

在我的方法部分：

addlink: function(words, matchterms){
                for(var index in matchterms){
                    var regquery = matchterms[index].replace(this.regEscape, '\\$&');
                    var query = matchterms[index];
                    var regEx = new RegExp(regquery, "ig");
                    words = words.replace(regEx, '<a href=\'#\' v-on:click.prevent=\'doSearch("'+ query +'")\'>' + query + '</a>');
                }
                return words;
            }

正如我所说，这不起作用，我知道为什么。这只是表明，由于问题的性质，正则表达式似乎是正确的解决方案，但这让我陷入了 v-html 注入情况。我可以在 Vue 中做些什么来注册事件处理程序，或者有人可以告诉我一种更好的方法来加载这些数据，这样我就可以让我的链接与句子保持一致并使它们也能正常工作？

标签： vue.js

解决方案

我已经发布了一个答案，但我刚刚意识到有一种完全不同的方法可能会根据您的情况起作用。

您可以使用事件委托。<a>因此，您可以在包装元素上放置一个监听器，而不是在每个监听器上放置点击监听器。然后，您可以在侦听器中检查单击的元素是否为<a>(using event.target) 并采取相应措施。

推荐阅读