CODEWITHSUNDEEP
javascriptjsonvue.jsvuejs2bootstrap-vue
B0BBY
B0BBY

Reputation: 1109

generate elements dynamically based on json file in bootstrap-vue

I'm working with BootstrapVue (Bootstrap 4.6 and VueJS 2) !

I want to create elements (input fields, dropdowns, checkboxes, etc.) dynamically based on a json file which is looking like that:

[
    {
        "unique_number": "1111",
        "key": "key1",
        "label": "Input 1",
        "input": "text",
        "value": ""
    },

    {
        "unique_number": "2222",
        "key": "key2",
        "label": "Input 2",
        "input": "text",
        "value": ""
    },

    {
        "unique_number": "3333",
        "key": "key3",
        "label": "Input 3",
        "input": "number",
        "value": ""
    }
]

So at the end there should be 3 input fields with 3 labels (Input 1, Input 2, Input 3)..

But I actually could not find something online to work with - so it would be very helpful if someone can help me out in this..

Upvotes: 0

Views: 232

Answers (1)

Eric Pezzulo
Eric Pezzulo

Reputation: 399

You need to map through the data, and return a component that takes the data from .map

const array = [
    {
        "unique_number": "1111",
        "key": "key1",
        "label": "Input 1",
        "input": "text",
        "value": ""
    },

    {
        "unique_number": "2222",
        "key": "key2",
        "label": "Input 2",
        "input": "text",
        "value": ""
    },

    {
        "unique_number": "3333",
        "key": "key3",
        "label": "Input 3",
        "input": "number",
        "value": ""
    }
]

I don't use Vue, but I'm sure its similar to how its done in React:

array.map((element,key) => {
   return (
    <div key={key}>
      <SomeComponent prop={element.prop}/>
   </div>
   )
}

Upvotes: 1

Related Questions