Класс условный с vue js - PullRequest
Новая
       39

Класс условный с vue js

0 голосов
/ 20 марта 2020

Я сделал еженедельный просмотр календаря с событиями на нем и есть бесплатные или выбранные события. Я пытался придать выбранным событиям другой цвет фона, но мне кажется, что я что-то упустил, так что если кто-то может мне помочь с этим, это будет здорово.

Чтобы дать более подробную информацию о коде: у меня есть массив событий (объектов), когда событие свободно, user_id равен 0. Поэтому я помещаю логическую переменную в данные и обновляю ее во время рендеринга функция displayEvents. Я знаю, что это не лучший способ, но я не могу найти другое решение, которое работает. так что, конечно, он возвращает «бесконечный l oop вопрос». Пожалуйста, если кто-то сможет найти лучший способ получить те же результаты, я буду рад.

это мой код: 

//the template 
------------------------------
<table>
   <tbody>
     <tr v-for="(time, index) in times" :key="index">
     <td class="headcol">{{time}}</td>
     <td v-for="(dayDate, index) in calendarWeek.weekDates" :key="index"  >
      <div v-show="displayEvent(dayDate, time)"
       :class="[event, selected !== 0 ? 'event_selected':'']"
      @click="toggleSelect(dayDate, time)" >
        {{formatDate(dayDate)}}
        <br>{{time}}
        </div>
     </td>
   </tr>
   </tbody>
 </table>  

  // the script 
   ---------------------

  data(){
     return:{  
     .....
    selected = false,
     }},

   methods:{
 //display Events
     displayEventC(dayDate, time) {
     if ( this.$store.state.token ) {
       return this.events.find(el=>{
         if( el.event_date === this.formatDate(dayDate) && el.start_time === time && el.user_id === 0 ){
        this.selected=false;
         return el
         }
         if( el.event_date === this.formatDate(dayDate) && el.start_time === time &&  el.user_id == this.$store.state.userId ){ 
         this.selected=true;
         return el
         } 
         });
     }
     else{
     return this.events.find(el=>{
         if( el.event_date === this.formatDate(dayDate) && el.start_time === time && el.user_id === 0 ){
         return el
         }
         });
     }
   },

это то, что у меня есть в качестве дисплея изображение

введите описание изображения здесь

Ответы [ 2 ]

0 голосов
/ 02 апреля 2020

решение состояло в том, чтобы добавить условие, что тип моего объекта не должен быть неопределенным, и я использовал идею в ответе Эггона

0 голосов
/ 21 марта 2020

Не знаю, правильно ли я вас понял, но это мое предложение: 

//div in v-fored td
:class="dynamicClass(dayDate)"

// script

computed: {
  dynamicClass () {
    return (day) => {
      let event = this.events.find(ev => ev.event_date === day);
      return event.user_id !== 0 ? 'event_selected':'event_free'
    }
  } 
}
...