CODEWITHSUNDEEP
vue.jsvuejs2
BlackXero
BlackXero

Reputation: 880

Injecting Template text as html element in vue js

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

Upvotes: 0

Views: 1452

Answers (1)

jeremyjone
jeremyjone

Reputation: 313

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

Upvotes: 1

Related Questions