Question

我试图显示我的for循环中的所有return openHour值，并将其显示在我的vue页面的p标签内。

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

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

当前如果我要使用console.log（openingHour）;它将显示所有对象的所有营业时间。但是，如果我返回openHour，它将仅显示第一个数据。

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>

Answer 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

显示字符串内插Vue JS中的for循环的所有项目

1 个答案: