Как убрать [ ] массива при выводе в html?

Question

[Иван Иванов]

Я написал календарь и у меня возникла проблема, что числа текущего месяца отображаются со знаком массива [ ], как их вывести без этого знака, и так чтобы числа из других месяцев (отображаются серым в календаре) выводились правильно.

Код на GitHub

<template>
  <div class="all">
    <div class="overflow-div">
      <div class="pagination">
        <div @click="prevPage" class="btn-left"><</div> 
        <p>{{ nameOfOneMonth }} {{ year }}</p>
        <div @click="nextPage" class="btn-right">></div> 
      </div>

        <div class="d_nameOfDays">
          <li v-for="day in nameOfDays" class="nameOfDays">{{ day }}</li>
        </div>
        <transition :name="nameOfClass" >
          <div :key="currentPage" class="fade_wrapper">
            <div v-for="(week, i) in getCalendar" class="d_day">
            <li v-for="day in week" class="li_day">
            <div class="day" v-bind:class="{ 'grey': isAnotherMonth(i, day), 'currentDay': currentDayOnCalendar(day) }">
              {{day}}
            </div>
              </li>
            </div>
          </div>
        </transition>
    </div>
  </div> 
</template>

<script>
  import json from './Calendar_data.json'
export default {
  data(){
    return{
      currentPage: 0,
      namesOfMonths: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      nameOfOneMonth: '',
      nameOfDays: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'],
      date: new Date(),
      isActive: true,
      year: '',
      nameOfClass: '',
      eventsData: json
    }
  },
  computed: {
    getCalendar(){
      return this.buildCalendar();
    }
  },
  mounted(){
    this.year = this.date.getFullYear();
    this.currentPage = this.date.getMonth();
    this.nameOfOneMonth = this.namesOfMonths[this.currentPage];
  },
  methods: {
    prevPage(){
      if (this.currentPage === 0) {
        this.currentPage = 12;
        this.year--;
      }
      this.nameOfClass = 'prev';
      this.currentPage--;
      this.nameOfOneMonth = this.namesOfMonths[this.currentPage];
    },
    nextPage(){
      if (this.currentPage === 11) {
        this.currentPage = -1;
        this.year++;
      }
      this.nameOfClass = 'next';
      this.currentPage++;
      this.nameOfOneMonth = this.namesOfMonths[this.currentPage];
    },
    isAnotherMonth(weekIndex, dayNumber) {
      if(weekIndex === 0 && dayNumber > 15) {
        // первая неделе и номер дня > 15
        return true
      }
      if (weekIndex === 4 && dayNumber < 15) {
        // последняя неделя и номер дня < 15
        return true
      }
      if (weekIndex === 5 && dayNumber < 15) {
        // последняя неделя и номер дня < 15
        return true
      }
      // день принадлежит текущему месяцу
      return false
    },
    currentDayOnCalendar(dayNumber){
      if(this.currentPage === this.date.getMonth() && 
        dayNumber === this.date.getDate() && 
        this.year === this.date.getFullYear()){
        return true
      }
      return false
    },
    getYear(){
      this.year = this.date.getFullYear();
    },
    getLastDayOfMonth(month) { // нахождение числа последнего дня в месяце
      let dateDaysInMonth = new Date(this.year, month + 1, 0);
      return dateDaysInMonth.getDate();
    },
    getNumberOfFirstDayInMonth(month){ //нахождение номера первого дня в месяце
      let dateFirstDayInMonth = new Date(this.year, month, 1);
      return dateFirstDayInMonth.getDay();
    },
    buildCalendar(){
      let arrOfEvents = this.eventsData.events;
      let massOfMonth = [];
      for (let months = 0; months < 12; months++){
        massOfMonth.push(months);
        massOfMonth[months] = [];
        for ( let daysInMonth = 0; daysInMonth < this.getLastDayOfMonth(months); daysInMonth++){
          massOfMonth[months][daysInMonth] = [];
          massOfMonth[months][daysInMonth].push(daysInMonth + 1)
          for(let z = 0; z < arrOfEvents.length; z++){
            let dataStartOfEvent = arrOfEvents[z].starts_at;
            let getStartDataOfEvent = new Date(dataStartOfEvent);
            let dataEndOfEvent = arrOfEvents[z].ends_at;
            let getEndDataOfEvent = new Date(dataEndOfEvent);
            let memo = arrOfEvents[z].memo;
              if(getStartDataOfEvent.getDate() == getEndDataOfEvent.getDate()){
                if(daysInMonth == getStartDataOfEvent.getDate() &&
                  this.currentPage == getStartDataOfEvent.getMonth() &&
                  this.year == getStartDataOfEvent.getFullYear()){
                  massOfMonth[months][daysInMonth - 1].push(memo)
                }
              }else if(getStartDataOfEvent.getDate() != getEndDataOfEvent.getDate()){
                for(let b = getStartDataOfEvent.getDate() - 1; b <= this.getLastDayOfMonth(getStartDataOfEvent.getMonth()); b++){
                  if(daysInMonth === b &&
                  this.currentPage == getStartDataOfEvent.getMonth() &&
                  this.year == getStartDataOfEvent.getFullYear()){
                    massOfMonth[months][daysInMonth].push(memo);
                  }
                }
                for(let b = 0; b < getEndDataOfEvent.getDate(); b++){
                  if(daysInMonth === b &&
                  this.currentPage == getEndDataOfEvent.getMonth() &&
                  this.year == getEndDataOfEvent.getFullYear()){
                     massOfMonth[months][daysInMonth].push(memo);
                  }
                }
              }
          }
        }
        // Заполняем начало каждого месяца числами из прошлого месяца
        if(this.getNumberOfFirstDayInMonth(months) > 0){
          let t = this.getLastDayOfMonth(months-1) + 1;
          for(let b = 0; b <= this.getNumberOfFirstDayInMonth(months) - 2; b++){
            t--;
            massOfMonth[months].unshift(t)
          }
        }else if(this.getNumberOfFirstDayInMonth(months) === 0){
          let t = this.getLastDayOfMonth(months-1) + 1;
          for(let nulldays = 0; nulldays <= 5; nulldays++){
            t--;
            massOfMonth[months].unshift(t);
          }
        }
        //Заполняем конец каждого месяца числами из будущего месяца
        if((this.getNumberOfFirstDayInMonth(months) === 0 || 
          this.getNumberOfFirstDayInMonth(months) === 6) &&
          (this.getNumberOfFirstDayInMonth(months + 1) > 1 &&
          this.getNumberOfFirstDayInMonth(months + 1) < 3)){
          let t = 0;
          for(let q = this.getNumberOfFirstDayInMonth(months + 1); q <= 7; q++){
            t++;
            massOfMonth[months].push(t);
          }
        } else{
          let t = 0;
          for(let q = this.getNumberOfFirstDayInMonth(months + 1); q <= 14; q++){
            t++;
            massOfMonth[months].push(t);
          }
        }
      }
      // разбиение большого массива месяц на 
      // меньшие массивы которые имеют по 7 элементов
      var longArray = massOfMonth[this.currentPage];
      var size = 7;
      
      var newArray = new Array(Math.ceil(longArray.length / size)).fill("")
          .map(function() { 
            return this.splice(0, size) 
          }, longArray.slice());
       //--------------------------------------------------   
        return newArray; // вывод самого календаря
    }
  }
};
</script>

Answer 1

[0xD34F]

Вместо <div>{{ day }}</div> пусть будет <div v-html="[].concat(day).join('<br>')"></div>. Это если надо по-быстрому заставить работать. Но вообще, стоит переписать так, чтобы дни были единообразно представлены - а то сейчас где-то число, где-то массив. Бред же.

Answer 2

[Александр Аксентьев]

Наверно надо не делать дни массивами в вашем мега-коде который разбирать всем будет лень кроме вас

ну или учитывать что это массив при выводе и выводить первый элемент а не весь "массив". Но это костыль из-за говнокода изначального, а не решение начального косяка.