¡Estoy trabajando con BootstrapVue (Bootstrap 4.6 y VueJS 2)!
Quiero crear elementos (campos de entrada, menús desplegables, casillas de verificación, etc.) dinámicamente basados en un archivo json que se ve así:
[ { "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": "" } ]Entonces, al final debe haber 3 campos de entrada con 3 etiquetas (Entrada 1, Entrada 2, Entrada 3).
Pero en realidad no pude encontrar algo en línea con lo que trabajar, por lo que sería muy útil si alguien pudiera ayudarme con esto.
Debe mapear los datos y devolver un componente que tome los datos de .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": "" } ]No uso Vue, pero estoy seguro de que es similar a cómo se hace en React:
array.map((element,key) => { return ( <div key={key}> <SomeComponent prop={element.prop}/> </div> ) }