Quiero generar campos de entrada en código bootstrap-vue basado en un archivo json.
Recorro esa matriz y mis campos b-form-input funcionan muy bien; el problema es que también necesito algunos campos de selección b-form-select y casillas de verificación b-form-checkbox .
¿Cómo puedo resolver eso y cómo puedo verificar en mi plantilla si hay alguna selección o casillas de verificación en mi json?
Porque quiero tener varios archivos json y estos son todos diferentes.
¡Gracias!
<template> <div v-for="item in testJSON" :key="item"> <label class="mt-2">{{item.label}}</label> <b-form-input :type="item.type" v-model="item.value"></b-form-input> <b-form-select :options="item.options"></b-form-select> </div> </template>mi guion:
<script> import test from './json/test.json' export default { name: 'Test', data() { return { testJSON: test, } } } </script>mi json importado:
[ { "number": "1111", "key": "key1", "label": "Input 1", "type": "text", "value": "" }, { "number": "2222", "key": "key2", "label": "Input 2", "type": "text", "value": "" }, { "number": "3333", "key": "key3", "label": "Input 3", "type": "number", "value": "" } { "number": "4444", "key": "key4", "label": "Select Input", "options": [ { "text": "Value 1", "value": "value1" }, { "text": "Value 2", "value": "value2" }, { "text": "Value 3", "value": "value3" }, { "text": "Value 4", "value": "value" } ], "value": "" } ]Yo pensaría que tampoco
R: Debe tener una matriz de options (incluso si está vacía) en cada objeto.
O
B: debe verificar en su plantilla si existen opciones como
<b-form-select v-if="item.options" :options="item.options"></b-form-select>Supongo que pensará algo similar con sus casillas de verificación, ya que en realidad no ha proporcionado ningún código para eso.