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..
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>
)
}