How To Replace A String With A Component (vue)

I have strings that contains ### and I am replacing with array values. Now I want to use them with a component, I created the component and it works but I don't know how to use it

Solution 1:

This is more general, but I hope it will help someone. Add a dynamic component in your template: <component v-bind:is="processedHtml"></component>.

Then add a computed method:

computed: {
    processedHtml () {
        let html = this.html.replace('[Placeholder]', '<my-component></my-component>');
        return {
            template: '<div>' + html + '</div>'
        }
     }
}

Where <my-component> is your custom component and the this.html is your HTML content that contains the placeholder [Placeholder].

It is important to return an element that has one root node. That's why the return is wrapped with <div>.

Read more advanced tutorial about this issue here in my blog. For example, to pass props to <my-component>

Solution 2:

I just experienced the same issue. I had an element that needed to display the current count of an item. The current count came from the store and was constantly changing. I used v-text. I know this is pretty situation specific, but hopefully it helps someone down the line.

<P id="results_count" v-text="current_count"></P> 

and in the data portion of the component I had a property named current_count that was updated via methods.