Question

我有一个post.text数据，其中包含用户提交的博文的文字很像在Twitter中，用户可以使用sintax I am tagging @user1 in this post来提及其他用户。在渲染帖子时，我想用所有用户的页面链接替换所有@username个实例。

使用正则表达式匹配/替换，我可以轻松地将提到的@username转换为类似的东西（我使用vue-router）：

I am tagging <router-link :to="{name: 'user', params: {userId: post.userId}}">{{ dPost.user_name }}</router-link> in this post

但是当我像这样使用它时：

<p v-html="preparedText"></p>

vue没有重新处理 html来绑定自己的标签。

如何解决这个问题？感谢

Answer 1

你想做什么sortof打破了正常的Vue范例，但可以使用Vue.compile来完成。您需要使用Vue.compile生成渲染函数，然后手动创建新的Vue实例一旦你的组件安装完毕。

以下是一个例子：

Vue.component('post', {
  template: `<div></div>`,
  props: { text: String },
  mounted() {
    let regex = /\B\@([\w\-]+)/gim;
    let username = this.text.match(regex)[0];
    let linkText = this.text.replace(regex, `<a href="#">${username}</a>`);
    let res = Vue.compile(`<p>${linkText}</p>`);
    
    let { render, staticRenderFns } = res;
    new Vue({ el: this.$el, render, staticRenderFns })
  }
})

new Vue({
  el: '#app',
  data() {
    return { text: `Hi @user1, how are you?` }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
  <post :text="text"></post>
</div>

Answer 2

您不需要使用v-html。

要动态呈现组件，只需使用:is="your component name"。

V-html

2 个答案: