循环 json 文件以在我的表中获取单独的元素

Posted 2023-02-16

【中文标题】循环 json 文件以在我的表中获取单独的元素

【英文标题】：Loop over json file to get seperate elements in my table

【发布时间】：2021-11-25 11:00:34

【问题描述】：

我正在使用 BootstrapVue。我有一个 v-for 循环，它遍历我的 json 文件并将完整的输入放在我的 <tr>-Tag 中。

现在我想在我的 json 文件中为每个组添加一个额外的 tr-Tag - 所以我认为我需要先遍历这些组 - 但我不知道该怎么做。

我的模板中的代码：

<table>
  <tbody>
    <tr> <!-- I WANT TO ITERATE HERE OVER MY GROUPS TO SORT THEM -->
      <div v-for="(item, index) in json" :key="index">
        <b-form-input v-if="item.type" :type="item.type"></b-form-input>
      </div>
    </tr>
  </tbody>
</table>

我的 json：

[
    
        "label": "Input 1",
        "type": "text",
        "group": "Test1"
    ,
    
        "label": "Input 2",
        "type": "text",
        "group": "Test2"
    ,
    
        "label": "Input 3",
        "type": "text",
        "group": "Test3"
    ,
    
        "label": "Input 4",
        "type": "number",
        "group": "Test1"
    
]

这就是代码的样子，只是为了理解，如果它有效：

<table>
  <tbody>
    <tr> 
       <b-form-input type="text"></b-form-input>
       <b-form-input type="number"></b-form-input>
    </tr>
    <tr>
       <b-form-input type="text"></b-form-input>
    </tr>
    <tr>
       <b-form-input type="text"></b-form-input>
    </tr>
  </tbody>
</table>

【问题讨论】：

额外的<tr>是什么意思？

你能否用你的示例代码清楚你想说什么！

对不起。实际上这不是额外的tr，但现在我只有一个tr-Tag，我需要每个组（Test1、Test2 和 Test3）在单独的div 或 tr 中

现在我对所有项目进行了一次迭代 - 但我需要先检查这些组，然后根据该组将我的组放在一个单独的 div / tr 中

试试下面的解决方案

【参考方案1】：

为tr添加v-for

<table>
  <tbody>
    <tr v-for="(group, key) in getComputedJson" :key="key">
      <div v-for="(item, indexer) in group" :key="indexer">
        <b-form-input v-if="item.type" :type="item.type"></b-form-input>
     </div>
    </tr>
  </tbody>
</table>

并定义一个计算处理程序，如

<script>
export default 
 computed: 
  getComputedJson() 
   const computedJson = ;
   this.json.forEach(item => 
    if(!computedJson[item.group]) 
     computedJson[item.group] = [];
     computedJson[item.group].push(label: item.label, type: item.type);
     else 
    computedJson[item.group].push(label: item.label, type: item.type);
   
  
return computedJson;

</script>

【讨论】：

这行不通，因为首先我需要遍历我的组，然后将具有相同组的所有其他输入放在单独的 div 中..

哦，我明白了，等我更新解决方案

立即查看更新的答案

谢谢！ - 是否也可以推送复选框或选择的选项？

是的，但你必须在模板端使用 v-if 来处理它们