如何在VueJS 2中链接HTML字符串中的单词并为其分配@click方法？
如何在VueJS 2中链接HTML字符串中的单词并为其分配@click方法？
提问于 2018-08-04 00:20:47
我有一个字符串数组，我想在其中链接某些单词，如"User object“、"Promise”等，如下所示：
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>');
}
}有什么想法吗？
回答 1
Stack Overflow用户
发布于 2018-08-04 01:23:24
下面是一个组件示例，该组件接受完整消息的字符串和要替换为链接的文本的字符串，并使用该消息呈现一个跨度，其中链接文本包装在<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51676643
复制相关文章
相似问题
腾讯云开发者
