Question

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

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

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

对于Vue JS还是相当新的，所以任何帮助将不胜感激！

output$pivtbl <- renderRpivotTable({
  tbl <- rpivotTable(
    data            = DataSet(),
    aggregatorName  = "Sum",
    vals            = "Count",
    cols            = "ExceptionDate",
    rows            = "ErrorCode",
    menuLimit       = 1200,
    rendererName    = "Line Chart",
    rendererOptions = list(
      c3 = list(
        legend = list(
          show = FALSE
        )
      )
    )
  )

  tbl$x$params$rendererOptions <- tbl$x$params$rendererOptions[[1]]

  tbl #return value
})

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);
    }
  }
}

Answer 1

<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>

希望有帮助

Answer 2

这是我如何解决的草图（抱歉，我尚未测试代码）：

模板：

显示开放时间

<div class="openingHours d-flex flex-wrap mb-10"
     v-if="showOpeningHours"
     v-for="item in foodMerchant.opening_hours.data">
  <div class="d-flex justify-content-between mb-10 w-100">
    <h5 class="font-italic text-black font-12">
      {{ formatDay(item.day) }}
    </h5>

    <h5 class="font-italic text-black font-12 font-weight-light">
      {{ formatTime(item.startHour, item.startMinute, item.startSecond) }}
      -
      {{ formatTime(item.endHour, item.endMinute, item.endSecond) }}
    </h5>
  </div>
</div>

组件：

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

const WEEKDAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday',
                  'Friday', 'Saturday'];

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

  private formatDay(day: number): string {
    return WEEKDAYS[Math.trunc(day) % 7]
  }

  private formatTime(h: number; m: number, s: number): string {
    // It's better to use a library for this
    // The Date constructor needs a full date, but we'll only use the time
    const date = new Date(`2000-01-01 ${h}:${m}:${s}`)
    return date.toLocaleTimeString('en-us');
  }
}

您的问题是：

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

我认为您已经正确识别了您面临的主要问题：如何显示所有项目以及如何格式化它们。

如您所见，v-for是显示各种列表的一种好方法，而无需重复自己。

格式化是一个更大的话题，有很多方法可以做到。我在上面的工作中包括的代码，但是大部分都作为示例。您可能需要考虑以下事项：

Vue filters可以让您在单个位置定义格式并编写类似{{ item.startTime | formatTime }}的代码
使用库来帮助您格式化内容。日期可能很棘手，尤其是当您需要支持其他语言环境时。其中有很多-我用过date-fns，luxon和Moment。它们都有各自的优缺点。
如果您控制数据的格式，则可以确保它易于格式化，即可以使用选择的库进行解析和格式化，而无需先对其进行修改。

最后，我认为您的问题对于Stack Overflow格式来说有点太宽泛，因为答案可能对您没有帮助。另一方面，您已经做出了很大的努力来展示您尝试过的内容和想法。查看您的代码，您似乎知道自己在做什么，但是您只是缺少了一些工具。如果还没有，请跳过Vue Guide的主要部分。有很多例子。即使您一次也不了解所有内容，最好还是要知道有什么可能。

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

2 个答案: