How to render div/component in other places in vue?

Question

How to render a div/component in other places on my component without make the duplicate content as separate component in vue? or separate the duplicate content from the targets?

for example this is the div I want to duplicate:

<div>blabla {{somecontent}}</div>

and I want to render in those places (all the code should be in one component):

<section>
 <div> __HERE__ </div>
</section>
<section>
 <div> __HERE__ </div>
</section>

I think want I expect is something like this:

<div #blabla>blabla {{somecontent}}</div>
<section>
 <div> {{blabla}} </div>
</section>
<section>
 <div> {{blabla}} </div>
</section>

There is a simple solution using directive, but I don't think that it would satisfy your needs. You can find it here — Muhammad Vakili

Shahadat Hossain Shahadat Hossain · Accepted Answer · 2020-02-22T08:17:44

A good solution is creating a Vue component. I always try to create component. AS question demand I give a solution here.

You can create a computed or a method that will render the component like this

<script>
   ...,
   computed: {
       renderBlaBla() {
          return `<div #blabla>blabla ${this.somecontent}</div>`
       }
   },
   ....
</script>

and in the template section

<section>
     <div v-html="renderBlaBla"></div>
</section>
<section>
    <div v-html="renderBlaBla"></div>
</section>

How to render div/component in other places in vue?

1 Answers