如何使用Vue在json中处理同一级别的对象和数组？

Question

我有一个 json 文档，我从中提取以填充表格以及工作表上的其他几个项目。在文档的同一“级别”上，我有对象和数组。我不确定如何管理在 Vue 中显示数组的子项和对象的子项。

我尝试过使用各种 if 语句分别显示对象的子级和数组的子级，但都没有成功。

由于隐私问题，我无法显示实际代码，但这里有一个过于简单的示例，说明我正在查看的数据以解决这个问题：

"Pairs": [
        {
            "Value": {
                "Id": "123"
            },
            "Children": [
                "Id": "111",
                "String": {
                    "Value": "999",
                    "Children": [
                        {
                            "Key": "555"
                        },
                        {
                            "Key": "444"
                        },
                    ]
                }
            ]   
        },
        {
            "Value": {
                "Id": "456"
            },
            "Children": [
                "Id": "178",
                "Strings": [
                    {
                        "Value": "845",
                        "Children": [
                            {
                                "Key": "079"
                            },
                            {
                                "Key": "106"
                            }
                        ]
                    },
                        "Value": "578",
                        "Children": [
                            {
                                "Key": "279"
                            },
                            {
                                "Key": "745"
                            }
                        ]
                ]
            ]
        }
]

那么这是我在 Vue 前端的表格

<table>
    <template v-for="Pair in Pairs">
        <template v-for="Child in Pair.Children">
            <template v-for="String in Child.Strings"> --- PROBLEM HERE
                <tr v-for="Child in String.Children">
                    <td>{{Child.Key}}</td>
                </tr>
            </template>
        </template>
    </template>
</table>  

从上面的例子可以看出，Pairs 数组中的第一个对象有一个名为“String”的对象，第二个有一个名为“Strings”的数组。如您所料，当我尝试访问 Vue 文档中的对象 String 或数组 Strings 时，我得到一个未定义的错误。我被困住了。

Answer 1

通常这样的事情会使用计算属性来完成，以将数据转换为更易于在模板中使用的表单。像这样的：

const Pairs = [
  {
    "Value": {
      "Id": "123"
    },
    "Children": [{
      "Id": "111",
      "String": {
        "Value": "999",
        "Children": [
          {
            "Key": "555"
          },
          {
            "Key": "444"
          }
        ]
      }
    }]
  },
  {
    "Value": {
      "Id": "456"
    },
    "Children": [{
      "Id": "178",
      "Strings": [
        {
          "Value": "845",
          "Children": [
            {
              "Key": "079"
            },
            {
              "Key": "106"
            }
          ]
        },
        {
          "Value": "578",
          "Children": [
            {
              "Key": "279"
            },
            {
              "Key": "745"
            }
          ]
        }
      ]
    }]
  }
]

new Vue({
  el: '#app',
  
  data () {
    return { Pairs }
  },
  
  computed: {
    rows () {
      const pairs = this.Pairs
      const rows = []
      
      for (const pair of pairs) {
        for (const child of pair.Children) {
          const strings = child.Strings || [child.String]
          
          for (const string of strings) {
            const row = []
            rows.push(row)

            for (const innerChild of string.Children) {
              row.push(innerChild.Key)
            }
          }
        }
      }
      
      return rows
    }
  }
})

td {
  border: 1px solid #000;
}

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
  <table>
    <tr v-for="row in rows">
      <td v-for="entry in row">{{ entry }}</td>
    </tr>
  </table>
</div>

我不得不在示例数据中添加一些额外的大括号，因为它在原始形式中是无效的。

应该可以通过对模板进行小的更改来实现这一点，但通常鼓励保持模板简单并将任何复杂的内容放入组件的 JS 部分。

<template v-for="String in Child.Strings || [Child.String]">

上面的代码假定Strings 或String 之一将始终存在。如果它们都可能丢失，那么您可以改用这样的东西：

<template v-for="String in [].concat(Child.Strings || Child.String || [])">

或者将逻辑移到方法中：

<template v-for="String in getStrings(Child)">

methods: {
   getStrings(Child) {
      // Pull out Strings or [String] as appropriate
   }
}