在字符串插值Vue JS中显示for循环的所有项目答案

【问题标题】：Display all items of for loop inside string interpolation Vue JS在字符串插值Vue JS中显示for循环的所有项目
【发布时间】：2019-05-05 09:46:47
【问题描述】：

我正在尝试从我的 for 循环中显示所有返回的 openingHour 值，并将其显示在我的 vue 页面的 p 标签中。

我不确定我是否应该为此使用计算属性，因为我认为计算属性应该只返回一个值？

如果我要使用一种方法，我如何在字符串插值中显示数据？

目前如果我要 console.log(openingHour);它将显示所有对象的所有开放时间。但如果我返回openingHour，它只会显示第一个数据。

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

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

  get showOpeningHour() {
    for (let i = 0; i < this.foodMerchant.opening_hours.data.length; i++) {
      let openingHour = DateTime.fromObject({
        hour: this.foodMerchant.opening_hours.data[i].startHour,
        minute: this.foodMerchant.opening_hours.data[i].startMinute,
        zone: this.foodMerchant.timezone
      }).toFormat('h:mm a');

      return openingHour;
    }
  }
}

// This will display as 9.30 AM
<p>{{showOpeningHour}}</p>

【问题讨论】：

showOpeningHour() 函数应该返回一个字符串或对象列表，然后将其绑定到 v-for 循环。
“我相信计算属性只应该返回一个值” ????数组仍然是一个值

标签： for-loop vue.js vuejs2 string-interpolation

【解决方案1】：

给定<p>{{showOpeningHours}}</p>，showOpeningHours 计算属性可以将营业时间数据格式化为一个长字符串：

get showOpeningHours() {
  const daysOfWeek = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
  const openingHours =
    this.foodMerchant.opening_hours.data
      .map(hours => {
        const timeStr = DateTime.fromObject({
                          hour: hours.startHour,
                          minute: hours.startMinute,
                          zone: this.foodMerchant.timeZone
                        }).toFormat('h:mm a');
        return daysOfWeek[hours.day] + ' ' + timeStr;
      });
  return openingHours.join(' / ');
}

demo 1

或者您可以将计算属性更改为数组，使用v-for 呈现：

get showOpeningHours() {
  const daysOfWeek = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
  const openingHours =
    this.foodMerchant.opening_hours.data
      .map(hours => {
        const timeStr = DateTime.fromObject({
                          hour: hours.startHour,
                          minute: hours.startMinute,
                          zone: this.foodMerchant.timeZone
                        }).toFormat('h:mm a');
        return daysOfWeek[hours.day] + ' ' + timeStr;
      });
  return openingHours; // <-- RETURNS ARRAY
}

模板：

<ul>
  <li v-for="hours in showOpeningHours" key="hours.day">{{hours}}</li>
</ul>

demo 2

【讨论】：