Vue 2 - 如何从对象内部的数组中获取属性答案

【问题标题】：Vue 2 - How to v-for a property from an array that is inside an objectVue 2 - 如何从对象内部的数组中获取属性
【发布时间】：2021-07-13 15:03:34
【问题描述】：

我试图从名为girlsList 的主数组中的TimeMode 数组推断time 属性，但我没有显示任何内容，你可以看到这个example in codesandbox

<template>
  <div>
    <p>The time property is not displayed</p>
    <ul>
      <li v-for="(item, index) in girlsList.TimeMode" :key="index">
        {{ item.time }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",

  data() {
    return {
      girlsList: [
        {
          avatarSrc: "https://i.ibb.co/G0nLSQ8/Girl-1.png",
          girlName: "Milena Williams",
          girlTime: "12:00 - 16:00 PM",
          TypeTime: "Cosplay",
          TimeMode: [
            {
              time: 60,
            },
          ],
        },
        {
          avatarSrc: "https://i.ibb.co/qJB12x6/Girl-2.png",
          girlName: "Milena Williams",
          girlTime: "12:00 - 16:00 PM",
          TypeTime: "Cosplay1",
          TimeMode: [
            {
              time: 60,
            },
          ],
        },
      ],
    };
  },
};
</script>

【问题讨论】：

标签： arrays vue.js for-loop vuejs2

【解决方案1】：

GirList 和 TimeMode 是数组，所以你需要在两者之间做一个 for beetween（两个 for）或在 TimeMode 数组中放置一个位置：

<li v-for="(item, index) in girlsList" :key="index">
    {{ item.TimeMode[0].time }}
</li>

【讨论】：

【解决方案2】：

<ul v-for="(i, index) in girlsList" :key="index">
  <li v-for="(item, index) in i.TimeMode" :key="index">
    {{ item.time }}
  </li>
</ul>

【讨论】：