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

Posted 2023-02-16

【中文标题】Vue 2 - 如何从对象内部的数组中获取属性

【英文标题】：Vue 2 - How to v-for a property from an array that is inside an object

【发布时间】：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>

【参考方案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>