bootstrap-vue中基于json文件动态生成元素

Posted 2023-02-16

【中文标题】bootstrap-vue中基于json文件动态生成元素

【英文标题】：generate elements dynamically based on json file in bootstrap-vue

【发布时间】：2021-11-21 10:17:42

【问题描述】：

我正在使用 BootstrapVue（Bootstrap 4.6 和 VueJS 2）！

我想根据看起来像这样的 json 文件动态创建元素（输入字段、下拉菜单、复选框等）：

[
    
        "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": ""
    
]

所以最后应该有 3 个带有 3 个标签的输入字段（输入 1、输入 2、输入 3）..

但我实际上在网上找不到可以使用的东西 - 所以如果有人可以帮助我，那将非常有帮助..

【问题讨论】：

你需要forEach元素，然后使用Document.createElement()

【参考方案1】：

您需要通过数据进行映射，并返回一个从 .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": ""
    
]

我不使用 Vue，但我确信它类似于它在 React 中的完成方式：

array.map((element,key) => 
   return (
    <div key=key>
      <SomeComponent prop=element.prop/>
   </div>
   )

【讨论】：

正确，但是 Vue 使用 directives。在这种情况下，它将是 <div v-for="element in array"> <input :label="element.unique_number" /> </div>

感谢您的回答 - 问题是我正在将我的 json 文件导入到一个组件中......所以我不能写“const array = []” - 你有什么解决方案吗?

const array = require('./<nameOfFile>.json') console.log(array) 看看是否打印出您的列表，您也可以尝试使用 ES6 模块支持并使用 import 而不是 require