如何访问无变量定义的嵌套数组中的全部数据？

问题场景 #

通常从嵌套数组中获取数据很直接，比如面对带键值对的嵌套结构：

myArray: [
  {
    myNestedArray: [
      {
        name: 'Some name'
      },
      {
        name: 'Some other name'
      }
    ]
  }
]

可以通过v-for结合属性访问来取值：

<div v-for="item in myArray">
  {{ item.myNestedArray[0].name }}
</div>

但如果嵌套数组是纯字符串元素（无键值对），比如：

myArray: [
  {
    myNestedArray: [
      'Rob',
      'John',
      'Jacob'
    ]
  }
]

直接访问item.myNestedArray[0]只能拿到第一个元素，直接输出item.myNestedArray会得到带方括号的数组格式（空数组显示[]），实际输出类似：

[]
[ "Rob", "John", "Jacob" ]
[]
[]
[ "Tom" ]
[ "Liz" ]
[ "Martin, James" ]
[]

我们需要将所有字符串元素逐行输出，空数组不显示，同时把带逗号的字符串拆分成单独行，最终输出如下格式：

Rob 
John
Jacob
Tom
Liz
Martin
James

解决方案 #

通过多层v-for遍历，配合字符串拆分处理，就能实现需求：

<template>
  <div>
    <!-- 遍历外层数组 -->
    <div v-for="(item, outerIndex) in myArray" :key="outerIndex">
      <!-- 遍历每个元素的嵌套字符串数组 -->
      <template v-for="(nameStr, nameIndex) in item.myNestedArray" :key="nameIndex">
        <!-- 拆分带逗号的名字并逐行输出 -->
        <div v-for="(name, splitIndex) in nameStr.split(', ')" :key="splitIndex">
          {{ name }}
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myArray: [
        { myNestedArray: [] },
        { myNestedArray: ['Rob', 'John', 'Jacob'] },
        { myNestedArray: [] },
        { myNestedArray: ['Tom'] },
        { myNestedArray: ['Liz'] },
        { myNestedArray: ['Martin, James'] },
        { myNestedArray: [] }
      ]
    }
  }
}
</script>

逻辑说明 #

1. 第一层v-for遍历外层的myArray，获取每个包含嵌套数组的对象
2. 第二层v-for遍历对象中的myNestedArray，拿到每个字符串元素；空数组不会触发这层遍历，自然不会输出[]
3. 第三层v-for针对包含逗号的字符串，用split(', ')拆分成子数组，再逐个输出，实现带逗号名字的分行显示

内容的提问来源于stack exchange，提问作者Scandidi