v-htmlのVueコンポーネント/要素

Question

私はpost.textのデータを持っています。これは、ユーザーが投稿したブログ投稿のテキストを含んでいます。Twitterのように、ユーザーはsintax I am tagging @user1 in this postで他のユーザーに言及できます。投稿をレンダリングするときに、すべての@usernameインスタンスを上記のユーザーのページへのリンクに置き換えたいとします。

正規表現一致で/私は簡単​​に（私はVUE-ルータを使用しています）のようなものに言及した@usernameを変換することができ置き換える：

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>