如何在VueJS 2中链接HTML字符串中的单词并为其分配@click方法

Question

我有一个字符串数组，我想在其中链接某些单词，如"用户对象"、"承诺"等，如下所示：

var strings = ['This returns a promise containing a User Object that has the id', 'next string']

这需要像一样呈现

<div class="wrapper">
<div class="item" v-for="str in strings" v-html="str"></div>
</div>

问题是我想替换像"用户对象"、"承诺"这样的词，并将它们绑定到我的应用程序可以处理的@click事件。

所以，如果它被渲染成我想要的样子，它会是这样的(上面手动渲染的相同v-for循环(

<div class="wrapper">
<div class="item">This returns a <a href="#" @click.prevent="help('promise');">promise</a> containing a <a href="#" @click.prevent="help('User object');">User object</a> that has the id</div>
<div class="item">next string</div>
</div>

我尝试过这样做，但它没有绑定@click事件

methods: {
linkify(str) {
return str.replace(/user object/, '<a href="#" @click="help">User object</a>');
}
}

有什么想法吗？

Answer 1

以下是一个组件的示例，该组件接收完整消息的字符串和文本的字符串以替换为链接，并使用<a>标记中的链接文本呈现具有该消息的跨度：

Vue.component('linkify', {
template: '#linkify-template',
props: {
value: { type: String },
linkText: { type: String }
},
computed: {
before() {
return this.value.split(this.linkText)[0];
},
after() {
return this.value.split(this.linkText)[1];
}
}
});
new Vue({
el: '#app',
data() {
return {
message: 'This returns a promise containing a User Object that has the id',
}
},
methods: {
foo() {
console.log('clicked')
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script type="text/x-template" id="linkify-template">
<span>
{{ before }}
<a href="#" @click.prevent="$emit('click')">
<code>{{ linkText }}</code>
</a>
{{ after }}
</span>
</script>
<div id="app">
<linkify link-text="User Object" :value="message" @click="foo"></linkify>
</div>

Answer 2

好的，想明白了如果有人有更好的方法，请也回答

Vue.component('linkify', {
props: ['value', 'words'],
template: `<span :is="html"></span>`,
data() {
return {
html: Vue.compile('<span>' + this.value.replace(new RegExp('(' + this.words.join('|') + ')', 'g'), `<a href="#" @click.prevent="$parent.$emit('click', '$1')"><code>$1</code></a>`) + '</span>'),
}
}
});

现在我需要在主应用程序中做的就是：

<div class="wrapper">
<div class="item" v-for="str in strings">
<linkify :value="str" :words="['user object', 'promise']" @click="help"></linkify>
</div>
</div>

不幸的是，这只适用于完整版本的Vue(具有编译功能(