Вот эскиз, как я мог бы решить его (я не проверял код, извините):
Шаблон:
показать часы работы
<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');
}
}
Ваши вопросы были:
- Использую ли я интерполяцию строк?
- Являюсь ли япредполагается использовать директиву v-for на странице .vue вместо отображения данных?
Я думаю, вы правильно определили основные проблемы, с которыми вы сталкиваетесь: как отобразить все элементы,и как их форматировать.
Как видите, v-for - это удобный способ показывать списки разных типов без повторения.
Форматирование - это большая тема, есть много способовсделать это.Код, который я включил выше, работает, но он приведен в качестве примера.Возможно, вы захотите учесть эти вещи:
- Фильтры Vue могут позволить вам определять форматирование в одном месте и писать код, подобный этому
{{ item.startTime | formatTime }} - Используйте библиотеку, чтобы помочь вам форматировать вещи.Даты могут быть хитрыми, особенно когда вам нужно поддерживать разные локали и т. Д. Их много - я использовал date-fns , luxon и Moment .Все они имеют свои плюсы и минусы.
- Если вы управляете форматом данных, вы можете быть уверены, что его легко форматировать, т. Е. Можно анализировать и форматировать в выбранной вами библиотеке, не изменяя ее в первую очередь.
Наконец, я думаю, что ваш вопрос слишком широк для формата переполнения стека, поскольку ответ может не помочь никому, кроме вас.С другой стороны, вы приложили немало усилий, чтобы показать, что вы пробовали и как вы думаете.Глядя на ваш код, кажется, что вы знаете, что делаете, но вам просто не хватает нескольких инструментов.Если вы еще этого не сделали, возможно, просмотрите основные разделы Vue Guide .Есть много примеров.Даже если вы не понимаете все сразу, хорошо иметь представление о том, что возможно.