时间戳

首页 > 解决方案 > 使用 Vue JS Typescript 迭代一个对象 -> 数组 -> 对象

arrays - 使用 Vue JS Typescript 迭代一个对象 -> 数组 -> 对象

问题描述

所以我有一个包含对象数组的对象。我需要获取数组每个对象中的数据以显示营业时间。

我已成功检索到代码段内 for 循环中的每个键值。但我不确定如何在我的 .vue 视图页面中显示它。

我使用字符串插值吗？我是否应该在 .vue 页面中使用 v-for 指令来显示数据？

对于 Vue JS 来说仍然是相当新的，所以任何帮助都将不胜感激！

在此处输入图像描述

import {
  Vue,
  Component
} from 'vue-property-decorator';
import {
  namespace
} from 'vuex-class';
import FoodMerchant from '../../models/FoodMerchant';

export default class MerchantProfilePage extends Vue {
  @namespace('merchant').State('foodMerchant') foodMerchant!: FoodMerchant;

  openingHours() {
    for (let i = 0; i < this.foodMerchant.opening_hours.data.length; i++) {
      console.log(this.foodMerchant.opening_hours.data[i].startHour);
    }
  }
}
<button @click="openingHours()">show opening hours</button>

<div class="openingHours d-flex flex-wrap mb-10">
  <div class="d-flex justify-content-between mb-10 w-100">
    <h5 class="font-italic text-black font-12">
      Wednesday
    </h5>

    <h5 class="font-italic text-black font-12 font-weight-light">
      5:00pm - 11:00pm
    </h5>
  </div>
</div>

<div class="openingHours d-flex flex-wrap mb-10">
  <div class="d-flex justify-content-between mb-10 w-100">
    <h5 class="font-italic text-black font-12">
      Thursday
    </h5>

    <h5 class="font-italic text-black font-12 font-weight-light">
      5:00pm - 11:00pm
    </h5>
  </div>
</div>

<div class="openingHours d-flex flex-wrap mb-10">
  <div class="d-flex justify-content-between mb-10 w-100">
    <h5 class="font-italic text-black font-12">
      Friday
    </h5>

    <h5 class="font-italic text-black font-12 font-weight-light">
      5:00pm - 11:00pm
    </h5>
  </div>
</div>

<div class="openingHours d-flex flex-wrap mb-10">
  <div class="d-flex justify-content-between mb-10 w-100">
    <h5 class="font-italic text-black font-12">
      Saturday
    </h5>

    <h5 class="font-italic text-black font-12 font-weight-light">
      5:00pm - 11:00pm
    </h5>
  </div>
</div>

<div class="openingHours d-flex flex-wrap mb-10">
  <div class="d-flex justify-content-between mb-10 w-100">
    <h5 class="font-italic text-black font-12">
      Sunday
    </h5>

    <h5 class="font-italic text-black font-12 font-weight-light">
      5:00pm - 11:00pm
    </h5>
  </div>
</div>

标签： arraysobjectfor-loopvue.jsv-for

解决方案

<div class="openingHours d-flex flex-wrap mb-10" v-for="(item, index) in foodMerchant.opening_hours.data" :key="index">
  <div class="d-flex justify-content-between mb-10 w-100">
    <h5 class="font-italic text-black font-12">
      {{ weeks[item.day - 1] }}
    </h5>

    <h5 class="font-italic text-black font-12 font-weight-light">
      {{ item.startTime }} - {{ item.endTime }}
    </h5>
  </div>
</div>
<script>
    export default {
        data() {
            return {
                weeks: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
            }
        }
    }
</script>

希望能帮助到你

推荐阅读