Javascript 如何在VueJS 2中链接HTML字符串中的单词并在@click方法中指定它们？

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

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

事件

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

方法：{
链接（str）{
返回str.replace（/user object/，“”）；
}
}

---

有什么想法吗？

好的，我想出来了如果有人有更好的方法，也请回答

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的完整版本（具有编译功能）

下面是一个组件示例，该组件接收用于完整消息的字符串和用于文本的字符串，以替换为链接，并使用链接文本包装在

{{after}}

非常有趣的问题，老实说，我也是Vue的新手。这可能会有帮助这就是你要找的？谢谢你的回答。这是否能够处理一个字符串中的多个关键字，并且同一关键字可能出现多次？

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