vue html의 Vue 구성 요소/요소

Question

사용자가 제출 한 블로그 게시물의 텍스트가 포함 된 post.text 데이터가 있습니다. Twitter와 마찬가지로 사용자는 sintax I am tagging @user1 in this post으로 다른 사용자를 언급 할 수 있습니다. 게시물을 렌더링 할 때 모든 @username 인스턴스를 언급 된 사용자의 페이지로 연결되는 링크로 바꾸고 싶습니다. 정규식 일치와

는/I 쉽게 (내가 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>

: 여기

은 예입니다