v-html中的Vue組件/元素

Question

我有一個post.text數據，其中包含用戶提交的博客文章的文本與Twitter類似，用戶可以使用sintax I am tagging @user1 in this post提及其他用戶。在呈現帖子時，我想用指向所述用戶的頁面的鏈接替換所有的@username實例。

用正則表達式匹配/替換我可以很容易地轉換提到@username到類似的信息（我使用VUE路由器）：

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>