Nuxt 中的日历组件

Question

我第一次在这里发帖。

我正在尝试在 nuxt 中创建日历以用于注册时间。我在此处粘贴的代码用于创建日历，但我想制作天数数组相反，它是一个对象数组，因此它不仅包含日期，还包含属性工作时间和加班时间等

但是当我试图让它成为 Data() 中的一个对象时，我不知道如何从加载天数代码中获取日期。希望有人能帮忙

<template>
  <div id="container" >
    <div>{{ $moment().format('dddd - do.MMMM.yyyy') }}</div>

   <!--eslint-disable -->
    <div class="grid-container">
    <p class="grid-item">September</p>
    <p class="grid-item"></p>
    <p class="grid-item">A</p>
    <p class="grid-item">O</p>
    <p class="grid-item">Fl</p>
    <p class="grid-item">S</p>
    <p class="grid-item">Fe</p>
    </div>
  <div v-for="(day, index) in days" class="grid-container">
    <p class="grid-item">{{ day.format("Do") }}</p>
    <p class="grid-item">{{ day.format("dddd") }}</p>
    <p class="grid-item">0</p>
    <p class="grid-item">0</p>
    <p class="grid-item">0</p>
    <p class="grid-item">0</p>
    <p class="grid-item">0</p>
  </div>
  </div>
</template>
<script>/* eslint-disable */
import moment from 'moment'


export default {
  data(){
    return{
    days: []
    }
  },
  mounted(){
    //load days
    let monthDate = moment().startOf('month')
    this.days = [...Array(monthDate.daysInMonth())].map((_, i) => {
      return monthDate.clone().add(i, 'day')
    })
  }

}
</script>
<style scoped>
  .grid-container{
    display: inline-grid;
    grid-template-columns: auto auto auto auto auto auto auto;

  }
  .grid-item {
    width: 125px;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 5px;
    font-size:16px;
    text-align: center;
  }

</style>

Answer 1

构建数组时，您可以像这样创建一个对象数组：

let monthDate = moment().startOf("month");
this.days = [...Array(monthDate.daysInMonth())].map((_, i) => {
  return {
    date: monthDate.clone().add(i, "day"),
    workhours: 0,
    overtime: 0
  };
});

在 map 函数中，我们 return 一个对象而不是单个属性

<div v-for="(day, index) in days" :key="index" class="grid-container">
  <p class="grid-item">{{ day.date.format("Do") }}</p>
  <p class="grid-item">{{ day.date.format("dddd") }}</p>
  <p class="grid-item">{{ day.workhours }}</p>
  <p class="grid-item">{{ day.overtime }}</p>
</div>

Nuxt 中的日历组件

Calendar component in Nuxt

momentjs

vue.js

nuxt.js