IvanInvanov
@IvanInvanov
Новичок

Почему данные не передаются через eventBus(шину событий)?

Добрый день, подскажите пожалуйста. Я написал календарь с отображением событий и теперь хочу сделать возможность добавления события в определенный день. При нажатии на кнопку добавления у меня срабатывает функция openAddEvent() в компоненте EventsDays в которой bus передаёт текущий день, месяц и год в компонент ModalWindowAdd в функцию addEvent. Я попробовал вывести в консоль все данные, которые я передал и у меня показало, что этих данных нету. И из-за этого я не могу в правильную дату добавить новосозданное событие. Подскажите, где я сделал ошибку в передаче информации в шине событий.

Полный код на ГитХаб

Скриншот консоли, которая показывает что передалось в функцию addEvent:
5d53efdc18ec3607712366.png

Компонент где лежат события, откуда отсылаются данные в функцию addEvent.
<template>
        <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"
                v-bind:class="{   'currentDay': currentDayOnCalendar(i, day), }" >  
              <img  src="src/assets/plus.png" 
                  width="16px" 
                  height="16px"
                  v-show="addPlus(i, day)" 
                  v-on:click="openAddEvent(day)"> 
              <div class="day" 
                   v-bind:class="{  'grey': isAnotherMonth(i, day),
                                    'red': weekEndDayFunction(i, day) }">{{ day }}</div>
              <div  v-for="event in buildEvents(i, day)" 
                    class="event"
                    v-bind:class="{  'eventBrown': eventBrown(event), 
                                     'eventPurple': eventPurple(event),
                                     'eventOrange': eventOrange(event),
                                     'eventBlue': eventBlue(event) }"
                    v-on:click="openModalDetail(event)">{{ event }}
              </div>
            </li>
          </div>
        </div>
      </transition>
</template>

<script>
	import { bus } from './../main.js'
export default {
  data(){
    return{
      date: new Date(),
      isActive: true,
      options: [
        { text: 'Встреча', value: '8' },
        { text: 'День Рождения', value: '4' },
        { text: 'Праздник', value: '1' },
        { text: 'Другое', value: '16' }
      ],
      year: Number,
      currentPage: Number,
      nameOfClass: '',
      modalWindowAdd: false,
    }
  },
  created(){
  	this.year = this.date.getFullYear();
    this.currentPage = this.date.getMonth();
  	bus.$on('sendYear', data => {
  		this.year = data
  	});
  	bus.$on('sendMonth', data => {
  		this.currentPage = data
  	});
  	bus.$on('sendNameOfClass', data => {
  		this.nameOfClass = data
  	});
  },
  computed: {
    getCalendar(){
      return this.buildCalendar();
    },
    eventsData() {
	  return this.$store.state.eventData;
	}
  },
  methods: {
    openAddEvent(dayNumber){
    	this.modalWindowAdd = true;
    	bus.$emit('changeModalWindowAdd', this.modalWindowAdd);
        bus.$emit('sendDayWhenAddEvent', dayNumber);
        bus.$emit('sendYear', this.year);
    	bus.$emit('sendMonth', this.currentPage);
    },
    buildEvents(weekIndex, dayNumber){
      let arrOfEvents = this.eventsData.events;
      const events = [];
       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(dayNumber == getStartDataOfEvent.getDate() &&
            this.currentPage == getStartDataOfEvent.getMonth() &&
            this.year == getStartDataOfEvent.getFullYear() &&
            !this.isAnotherMonth(weekIndex, dayNumber)){
              events.push(memo);
              continue;
          }
        }else if(getStartDataOfEvent.getDate() != getEndDataOfEvent.getDate() &&
            !this.isAnotherMonth(weekIndex, dayNumber)){
          for(let b = getStartDataOfEvent.getDate(); b <= this.getLastDayOfMonth(getStartDataOfEvent.getMonth()); b++){
            if(dayNumber === b &&
            this.currentPage == getStartDataOfEvent.getMonth() &&
            this.year == getStartDataOfEvent.getFullYear()){
              events.push(memo);
              continue;
            }
          }
          for(let b = 0; b <= getEndDataOfEvent.getDate(); b++){
            if(dayNumber === b &&
            this.currentPage == getEndDataOfEvent.getMonth() &&
            this.year == getEndDataOfEvent.getFullYear()){
              events.push(memo);
              continue;
            }
          }
        }
      }
      return events;
    },
  }
};
</script>


Компонент где лежит функция addEvent.

<template>
  <div class="underModalWindow">
      <div class="modalWindow">
        <img src="src/assets/x.png" width="20px" height="20px" @click="closeModalAdd">
        <div class="modalWindow_order">Укажите событие которое хотите добавить на выбраную вами дату.</div>
        <div class="modalWindow-input_select">
          <input type="text" placeholder="Место для вашего события" v-model="inputInAddEvent">
          <div>
            <select v-model="selected">
              <option disabled value="">Тип события</option>
              <option v-for="option in options" v-bind:value="option.value">
                {{ option.text }}
              </option>
            </select>
          </div>
        </div>
          <div v-if="textOfError" class="textOfError">Вы обязательно должны указать событие и тип события</div>
        <button v-on:click="addEvent(inputInAddEvent)">Добавить событие</button>
      </div>
    </div>
</template>

<script>
import { mapState } from "vuex";  
import { bus } from './../main.js'
export default {
  data(){
    return{
      date: new Date(),
      inputInAddEvent: '',
      options: [
        { text: 'Встреча', value: '8' },
        { text: 'День Рождения', value: '4' },
        { text: 'Праздник', value: '1' },
        { text: 'Другое', value: '16' }
      ],
      selected: '',
      textOfError: false,
      dayWhenAddEvent: Number,
      year: Number,
      currentPage: Number
    }
  },
  computed: {
    eventsData() {
      return this.$store.state.eventData;
    }
  },
  methods: {
    addEvent(text){
      bus.$on('sendDayWhenAddEvent', data => {
        this.dayWhenAddEvent = data;
      });
      bus.$on('sendYear', data => {
        this.year = data
      });
      bus.$on('sendMonth', data => {
        this.currentPage = data
      });
      console.log(this.dayWhenAddEvent)
      console.log(this.year)
      console.log(this.currentPage)
      if(this.selected == '' || text == ''){
        this.textOfError = true;
      }else if(text != ''){
        this.modalWindowAdd = false;
        bus.$emit('changeModalWindowAdd', this.modalWindowAdd)
        let arrOfEvents = this.eventsData.events;
        let eventObj = {
          "id": Date.now(),
          "starts_at": new Date(this.year, this.currentPage, this.dayWhenAddEvent),
          "ends_at": new Date(this.year, this.currentPage, this.dayWhenAddEvent),
          "memo": text,
          "type": +this.selected
        };
        arrOfEvents.push(eventObj);
        console.log(arrOfEvents[9].ends_at) // дата добавления последнего события
        this.inputInAddEvent = '';
      }
    },
    closeModalAdd(){
      this.modalWindowAdd = false;
      bus.$emit('changeModalWindowAdd', this.modalWindowAdd)
    }
  }
};
</script>
  • Вопрос задан
  • 74 просмотра
Пригласить эксперта
Ответы на вопрос 1
0xD34F
@0xD34F Куратор тега JavaScript
Вы уже используете vuex, вот через него данные и гоняйте.

UPD. Вынесено из комментариев:

через Vuex я уже сделал, теперь хочу потренироваться на шине событий

"Потренироваться"? Вам это не нужно - вы же начинающий, а шина событий к применению давно уже не рекомендуется. Зачем вам учиться с использованием сомнительных и устаревших практик?

в чём моя ошибка понять не могу

"Ошибка"? Ошибки - у вас их целый ворох. Во-первых, передаёте отдельно каждый элемент даты. Во-вторых - передаёте данные до того, как экземпляр компонента (окно добавления события) будет создан. В-третьих - подписываетесь на события в диалоговом окне почему-то в обработчике клика по кнопке добавления, а не при создании компонента. В-четвёртых - не удаляете обработчики событий при уничтожении экземпляра компонента. Есть ещё и в-пятых, и в-шестых, и т.д. В общем, всё очень-очень плохо.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
22 авг. 2019, в 11:45
1000 руб./за проект
22 авг. 2019, в 11:33
250000 руб./за проект
22 авг. 2019, в 11:09
600 руб./в час