在我的VUE应用程序"这个"关键字确实选择了一个DOM对象

时间:2017-07-08 18:41:53

标签: jquery vue.js fullcalendar vue-component

我正在我的Calendar.vue组件中编写VUE.js和FullCalendar应用程序我遇到了问题,this关键字不会选择一个元素。组件的模板如下所示:

    <template>
       <div id="calendar" :event-sources="eventSources" @event-selected="eventSelected" @event-created="eventCreated" :config="config">
          <button id="red" v-on:click="time">time</button>
          <full-calendar id="target" ref="calendarC" :navLinks="true" :event-sources="eventSources" @event-selected="eventSelected" @day-click="click"@event-created="eventCreated" :config="config"></full-calendar>  
       </div>
   </template>

我的&#34;这个&#34;关键字无法正常运行:

    click: function(date, jsEvent, view) {
       $("#red").css('background-color', 'red'); //here the jQuery works
       $(this.selected).css('background-color', 'red');//here nothing happens
    }

因此,当我点击日历中的元素时,id为红色的按钮变为红色,这让我知道jQuery正常工作。但是我点击的元素并没有变成红色。

1 个答案:

答案 0 :(得分:0)

据我所知,Vue.js并没有内置的“被选中”的概念。元件。通过使用date事件返回的day-click来确定CSS选择器是什么,然后使用它来设置背景颜色,可能会更好。请参阅下面的一些未经测试的代码,基于相关SO问题的答案:

click: function(date, jsEvent, view) {
    $("#red").css('background-color', 'red');

    var moment = date.toDate();
    MyDateString = moment.getFullYear() + '-'
                   + ('0' + (moment.getMonth() + 1) ).slice(-2)
                   + "-" +('0' + moment.getDate()).slice(-2);
    $('[data-date='+MyDateString+']').css({'background-color', 'red'});
}

来源:Change day number color on click - not background