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

Question

我正在使用 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>

Answer 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>

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

Loop over json file to get seperate elements in my table

javascript

json

vue.js

vuejs2

bootstrap-vue