javascript - 如何将提及标签文本转换为 ？ (VUEJS)

Question

我在数据中有一个 body 属性

data(){
 return{
  body:'Hello im @username1 and @username2'
 }
}

我想将每个@user 转换成下面的代码，用户可以在其中单击该链接以转到该 url 路径。

<router-link :to="`/${username1}`">@{{username1}}</router-link>

我尝试了什么

<span v-html='bodyReplaced'>
  computed: {
    bodyReplaced(){
      return this.body.replace(
        /@\w+/g, 
        (user) => '<router-link :to="`/${username1}`">@{{username1}}</router-link>'
      )
    }
  }

代码做了什么:

1. 在dom中将字符串转换为router-link，但在 View 中不转换
2. 我不知道如何在匹配后替换@，所以我可以在 to="`/${username1}
中使用它

Answer 1

我想你正在寻找类似的东西

<template v-for="part of body.split(/(@\w+)/g)">
  <router-link v-if="part[0] == '@'" :to="`/${part.slice(1)}`">{{part}}</router-link>
  <template v-else>{{part}}</template>
</template>

new Vue({
  el: 'main',
  data: {
    body:'Hello im @username1 and @username2'
  },
  router: new VueRouter({
    routes: []
  }),
})

<main>
  <template v-for="part of body.split(/(@\w+)/g)">
    <router-link v-if="part[0] == '@'" :to="`/${part.slice(1)}`">{{part}}</router-link>
    <template v-else>{{part}}</template>
  </template>
</main>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>