v-html의 Vue 구성 요소/요소

v-html의 Vue 구성 요소/요소

나는 가지고 있다post.text사용자가 제출한 블로그 게시물의 텍스트를 포함하는 데이터 트위터에서처럼, 사용자는 sintax를 사용하여 다른 사용자를 언급할 수 있습니다.I am tagging @user1 in this post투고를 렌더링할 때 모든 투고를 교체하고 싶다.@username지정된 사용자의 페이지에 대한 링크가 있는 인스턴스.

regex 일치/교체를 통해 언급한 내용을 쉽게 변환할 수 있습니다.@username(vue-router를 사용하고 있습니다):

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을 재처리하여 자체 태그를 바인딩하지 않습니다.

이 문제를 어떻게 해결하나요?고마워요.

통상적인 Vue 패러다임을 깨고 싶지만 를 사용하여 실행할 수 있습니다.를 사용해야 합니다.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>

사용할 필요가 없습니다.v-html.

컴포넌트를 동적으로 렌더링하려면:is="your component name".

언급URL : https://stackoverflow.com/questions/46584301/vue-components-elements-in-v-html