时间戳

首页 > 解决方案 > 根据 json 数据生成字段 - 如何解决选择/复选框

javascript - 根据 json 数据生成字段 - 如何解决选择/复选框

问题描述

我想基于 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": ""
    }
]

标签： javascriptvue.jsvuejs2bootstrap-vue

解决方案

我认为要么

A：你需要options在每个对象中有一个数组（即使它是空的）。

或者

B：如果选项存在，您需要检查您的模板

<b-form-select v-if="item.options" :options="item.options"></b-form-select>

我猜你的复选框也有类似的想法，因为你实际上没有为此提供任何代码。

推荐阅读