使用Vue JS Typescript迭代对象->数组->对象
使用Vue JS Typescript迭代对象->数组->对象
提问于 2018-11-29 09:30:46
所以我有一个包含对象数组的对象。我需要获取数组的每个对象中的数据来显示营业时间。
我已经成功地在代码片段内的for循环中检索到了每个键值。但是我不确定如何在我的.vue视图页面中显示它。
我要使用字符串插值吗？我是否应该在.vue页面中使用v-for指令来显示数据？
对于Vue JS来说仍然是相当新的，所以任何帮助都将不胜感激！
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);
}
}
}<button @click="openingHours()">show opening hours</button>
<div class="openingHours d-flex flex-wrap mb-10">
<div class="d-flex justify-content-between mb-10 w-100">
<h5 class="font-italic text-black font-12">
Wednesday
</h5>
<h5 class="font-italic text-black font-12 font-weight-light">
5:00pm - 11:00pm
</h5>
</div>
</div>
<div class="openingHours d-flex flex-wrap mb-10">
<div class="d-flex justify-content-between mb-10 w-100">
<h5 class="font-italic text-black font-12">
Thursday
</h5>
<h5 class="font-italic text-black font-12 font-weight-light">
5:00pm - 11:00pm
</h5>
</div>
</div>
<div class="openingHours d-flex flex-wrap mb-10">
<div class="d-flex justify-content-between mb-10 w-100">
<h5 class="font-italic text-black font-12">
Friday
</h5>
<h5 class="font-italic text-black font-12 font-weight-light">
5:00pm - 11:00pm
</h5>
</div>
</div>
<div class="openingHours d-flex flex-wrap mb-10">
<div class="d-flex justify-content-between mb-10 w-100">
<h5 class="font-italic text-black font-12">
Saturday
</h5>
<h5 class="font-italic text-black font-12 font-weight-light">
5:00pm - 11:00pm
</h5>
</div>
</div>
<div class="openingHours d-flex flex-wrap mb-10">
<div class="d-flex justify-content-between mb-10 w-100">
<h5 class="font-italic text-black font-12">
Sunday
</h5>
<h5 class="font-italic text-black font-12 font-weight-light">
5:00pm - 11:00pm
</h5>
</div>
</div>
回答 2
Stack Overflow用户
发布于 2018-11-29 09:44:05
<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>希望能有所帮助
Stack Overflow用户
发布于 2018-11-29 16:04:03
以下是我可能如何解决它的草图(对不起，我还没有测试代码)：
模板：
显示开放时间
<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-
- 指令来显示数据吗？
我认为您已经正确地确定了您面临的主要问题:如何显示所有项目，以及如何设置它们的格式。
正如您所看到的，v-for是一种巧妙的方式来显示不同类型的列表，而无需重复。
格式化是一个更大的话题，有很多方法可以做到这一点。我上面包含的代码可以正常工作，但它主要是作为一个示例。您可能需要考虑以下几点：
- Vue filters可以让您在一个地方定义格式，并像这样编写代码
{{ item.startTime | formatTime }} - Use，这是一个帮助您格式化内容的库。日期可能很棘手，特别是当你需要支持不同的地区时。有很多日期-我用过date-fns，luxon和Moment。它们都有不同的优缺点。
- 如果你控制数据的格式，你可以确保它很容易格式化，即可以用你选择的库进行解析和格式化，而不需要先修改它。
最后，我认为你的问题对于Stack Overflow格式来说有点太宽泛了，因为答案可能对除你之外的任何人都没有帮助。另一方面，你已经做出了很好的努力来展示你已经尝试了什么和你是如何思考的。看一下你的代码，看起来你知道你在做什么，但你只是缺少了一些工具。如果还没有，也许可以浏览一下Vue Guide的主要部分。有很多例子。即使你不能一下子理解所有的东西，知道什么是可能的也是很好的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53530587
复制相关文章
相似问题
腾讯云开发者
