Injecting Template text as html element in vue js

Question

I am looking for a solution where I have a line something this

This line have {{input}} in it and also the {{select}} in it.

Now this line is coming from database from backend and my frontend is Vue JS 2.6

What I want to achieve is I want to parse the {{input}} and convert it into html input tag like

<input type="text" class="some-class">

and same for the {{select}}

<select> <option value="Option value">Option Content</option> </select>

I am not sure how I inject it in the vue I am using vue with vuex

Please guide my, Any help is appreciated

Try using v-html directive of vue. vuejs.org/v2/guide/syntax.html#Raw-HTML — Yash Maheshwari
– Yash Maheshwari, Commented Mar 21, 2021 at 15:28
I tried it but it's not supporting other vue events and props — BlackXero
– BlackXero, Commented Mar 21, 2021 at 15:50

jeremyjone · Accepted Answer · 2021-03-22 08:24:20Z

1

I don't know if I got that right, but you now have a template string that you need to use in your component. You can try to turn the template string into a component and then use it in the parent component.

Vue.component('my-input', {
  template: '<input type="text" class="some-class">'
})

<div id="parent-demo">
  <my-input></my-input>
</div>

If you only have a {{input}} string and need to convert it to a component, you can write your own conversion function to convert {{input}} to a template string(<input type="text" class="some-class">), and then create the component in the same way as above

answered Mar 22, 2021 at 8:24

jeremyjone

3131 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BlackXero Over a year ago

I am such a fool, I am really a fool, Thank you so much mate.

Collectives™ on Stack Overflow

Injecting Template text as html element in vue js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related