Показать все элементы цикла внутри строки интерполяции Vue JS - PullRequest
Новая
       20

Показать все элементы цикла внутри строки интерполяции Vue JS

0 голосов
/ 04 декабря 2018

Я пытаюсь отобразить все возвращаемые значения открывающего часа из моего цикла for и показать его внутри тега ap моей страницы vue.

Я не уверен, должен ли я использовать вычисленныйсвойство для этого, так как я считаю, что вычисляемые свойства должны возвращать только одно значение?

Если бы я использовал метод, как я могу отобразить данные внутри интерполяции строк?

В настоящее время, если ябыли на console.log (открытие часа);он будет отображать все часы работы всех объектов.но если я верну первый час, он покажет мне только первые данные. 

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>

Data Object of Opening Hours

1 Ответ

0 голосов
/ 04 декабря 2018

Учитывая <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>

демо 2

...