根据 json 数据生成字段 - 如何解决选择/复选框
Posted
技术标签:
【中文标题】根据 json 数据生成字段 - 如何解决选择/复选框【英文标题】:generate fields based on json data - how to solve on selection / checkboxes 【发布时间】:2021-11-22 21:11:05 【问题描述】:我想基于 json 文件在 bootstrap-vue 代码中生成输入字段。
我遍历该数组,我的 b-form-input
字段运行良好 - 问题是我还需要一些选择字段 b-form-select
和复选框 b-form-checkbox
。
如果我的 json 中有任何选择或复选框,我该如何解决?如何签入模板?
因为我想拥有多个 json 文件,而这些都是不同的..
谢谢!
<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>
我的脚本:
<script>
import test from './json/test.json'
export default
name: 'Test',
data()
return
testJSON: test,
</script>
我导入的 json:
[
"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": ""
]
【问题讨论】:
看起来您需要根据导入的 json 的type
更改 html 模板。此外,您缺少 Select Input
的类型
【参考方案1】:
我也觉得
答:你需要在每个对象中有一个options
数组(即使它是空的)。
或者
B:如果选项存在,您需要检查模板
<b-form-select v-if="item.options" :options="item.options"></b-form-select>
我猜你的复选框也有类似的想法,因为你实际上并没有为此提供任何代码。
【讨论】:
完美解决方案!非常感谢!!以上是关于根据 json 数据生成字段 - 如何解决选择/复选框的主要内容,如果未能解决你的问题,请参考以下文章