私のVUEアプリケーションで "this"キーワードはDOMオブジェクトを選択します

Question

Calendar.vueコンポーネントにVUE.jsおよびFullCalendarアプリケーションを作成しています。問題が発生しました。このキーワードは要素を選択しません。コンポーネントのテンプレートは次のようになります。

<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> 

そして、私の「この」キーワードが動作していない機能はここにある：

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が正常に動作していることがわかります。しかし、私がクリックした要素は赤くならない。

Answer 1

私が知る限り、Vue.jsには 'selected'要素の組み込みコンセプトはありません。 day-clickイベントから返されたdateを使って、CSSセレクタが何であるか把握し、それを使って背景色を設定する方が良いでしょう。

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