Vue.js replace hashtags in text with <router-link>

Question

I am receiving text from a server that may contain some hashtags, and when displaying this text I would like to convert these tags with links.

Sample text: "#weather is very nice today"

The following code converts the string to

Today <router-link to="/tag/weather">#weather</router-link> is very nice 

but does not return to the <a> tag.

 <template> <p v-html="content"/> </template> <script> export default { methods: { convertHashTags: function(str) { return str.replace(/#([\w]+)/g,'<router-link to="/tag/$1">#$1</router-link>') } }, data() { return{ content: 'Today #weather is very nice' }; } </script> 

How to redraw content?

I tried https://codepen.io/movii/pen/WORoyg this approach, but it expects the whole line to be the only link, not text and some links.

Answer 1

Your code seems to fit the dynamic link component.

 console.clear() const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } const Weather = { template: '<div>weather</div>' } const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar }, { path: '/tag/weather', component: Weather }, ] Vue.component('dynamic-link', { template: '<component v-bind:is="transformed"></component>', props: ['text'], methods: { convertHashTags: function(str) { const spanned = `<span>${str}</span>` return spanned.replace(/#([\w]+)/g,'<router-link to="/tag/$1">#$1</router-link>') } }, computed: { transformed () { const template = this.convertHashTags(this.text); return { template: template, props: this.$options.props } } } }) const router = new VueRouter({ routes }) const app = new Vue({ router, data () { return { text: 'Today #weather is very nice' } } }).$mount('#app'); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <router-link to="/bar">Go to Bar</router-link> | <dynamic-link :text="text"></dynamic-link> <router-view></router-view> </div>