在我的 VUE 应用程序中，“this”关键字确实选择了一个 DOM 对象答案

【问题标题】：In my VUE application "this" keyword does select a DOM object在我的 VUE 应用程序中，“this”关键字确实选择了一个 DOM 对象
【发布时间】：2017-12-12 20:43:08
【问题描述】：

我在我的 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>

我的“this”关键字不起作用的功能在这里：

    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 工作正常。但是我点击的元素没有变红。

【问题讨论】：

标签： jquery vue.js fullcalendar vue-component

【解决方案1】：

据我所知，Vue.js 没有“选定”元素的内置概念。您最好使用day-click 事件返回的date 来确定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

【讨论】：