vue render string as a already existing component

Question

I am trying to build a vue app that receives from the database some html as string just like the following example:

<b-field :label="field.nome" :message="field.message"><b-input :value="value" :type="field.type" :maxlength="field.maxlength" :expanded="true" v-model="inputValue"/></b-field>

So, as you can see, it may contains components, like the b-field from buefy. My question is, can I render this string as the actual buefy component and its behavior? It doesn't matter if it's in the template tag or via render function with JSX, I just want to know if I can do it and how.

tony19 · Accepted Answer · 2022-07-15 23:31:24Z

2

You'll need the runtime + compiler version of vue, then you can create components on the fly:

const vm = Vue({
  template: "<b-field :label=...",
  data: ()=> ({
    field: {nome: ...}
  })
})

Which you can mount onto an element.

<span ref="placeholder"/>

vm.$mount(this.$refs.placeholder)
this.$on('$destroy', ()=> vm.$destroy())

Or, if you've got multiple dynamic components:

<span ref="container"/>

vm.$mount()
this.$refs.container.appendChild(vm.$el)
this.$on('$destroy', ()=> vm.$destroy())

edited Jul 15, 2022 at 23:31

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Oct 22, 2018 at 21:21

Bob Fanger

30k7 gold badges68 silver badges83 bronze badges

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

3 Comments

R.Silva Over a year ago

Bob, your answer helped me. But I got 2 problems. A) It's rendering only the first element, I want to loop through an array and render every element it gives me. B) It is rendering the value as an object, the input writes "[Object] [Object]" instead the real value, even if the value was simple string or number

Bob Fanger Over a year ago

That was not clear in the original question, i've updated my answer to account for multiple components. Create a new SO question for the "[Object] [Object]" issue , as this question doesn't provide enough details to answer what's going wrong.

R.Silva Over a year ago

I don't know why, but changing the code to .container.appendChild, the input rendered the right value instead of "[Object] [Object]".

Collectives™ on Stack Overflow

vue render string as a already existing component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related