根据 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 数据生成字段 - 如何解决选择/复选框的主要内容,如果未能解决你的问题,请参考以下文章

如何根据swift 3中的数组选择复选标记?

如何根据下拉列表中的选定数字生成表单输入字段(选择)

MySQL,根据 JSON 数组中的值选择记录

Swift 根据响应类型为 JSON 字段值动态选择 Codable 结构

根据选定的表视图行更新 UILabel

sql2008存储过程可以直接根据json生成表吗