How do I create an element with Vue JS?

Asked

Viewed 47 times

1

I made this very basic structure, a component with input, I wanted to click a button and generate one more in html. I try to search with appendchild or v-for or even v-html, but I’m not getting.

let entrada = new Vue({
    template:`
        <input />
    `
})

let app = new Vue({
    el: '#app',
    components: {
        entrada
}});

1 answer

4

Honestly your question is very bad, but reading the tags I think I understand more or less what you want... I understood that you want to build a form dynamically, if that’s my recommendation is you think about creating meta data templates of the form you want to render and then assemble your form according to the data structure of this meta data.

Example:

[
  {
    type: 'Input',
    label: 'My Input Label',
    value: null // ou pode vir com dados carregados do server
  },
  {
    type: 'Checkbox',
    label: 'My Checkbox Label',
    value: [],
    options: ['Option 1', 'Option 2', 'Option 3'] // para simplicidade usando string, mas pode usar um objeto complexo conforme sua necessidade
  }
]

All you have to do is create a component for each type, so each component knows how to render and treat each type of element in your form.

Then its component "Father", delegates your form item to a specific "Son" component, but he who knows which child component to use to render, treat and etc.

Here is a short example I made in the codesandbox:
Edit elegant-jones-6w75r

Browser other questions tagged

You are not signed in. Login or sign up in order to post.