vue-simple-calendar点击事件后如何获取事件名称与描述

Hey there! I see where you're running into trouble—your @click-event binding has a small mistake that's keeping you from accessing the clicked event's data. Let's get this sorted step by step.

Step 1: Correct the Click Event Binding in Your Template #

You don't need to manually pass calendarItem and windowEvent in the template. The component automatically passes these parameters to your handler function. Update your calendar-view component like this:

<calendar-view 
  :show-date="showDate" 
  :events="events" 
  class="theme-default holiday-us-traditional holiday-us-official" 
  @click-date="onClickDate" 
  @click-event="onClickEvent"  <!-- Remove the manual parameter passing here -->
  :startingDayOfWeek="startingDoW"
>
  <calendar-view-header slot="header" slot-scope="t" :header-props="t.headerProps" @input="setShowDate" />
</calendar-view>

Step 2: Define the Handler Method to Access Event Data #

In your Vue component's methods section, define onClickEvent to accept two parameters: the clicked event object (from your events array) and the native DOM event. You can directly pull the name and description from the first parameter:

methods: {
  onClickEvent(clickedEvent, nativeEvent) {
    // Access the event's name and description directly from clickedEvent
    const eventName = clickedEvent.name;
    const eventDescription = clickedEvent.description;

    // Do whatever you need with this data—log it, display it in a modal, etc.
    console.log(`Clicked Event: ${eventName}`);
    console.log(`Description: ${eventDescription}`);
  }
}

Step 3: Double-Check Your Events Array Structure #

Make sure each item in your events array includes the name and description fields (or whatever custom fields you're using for these details). For example:

data() {
  return {
    events: [
      {
        name: "Quarterly Review",
        description: "Go over Q3 performance metrics",
        startDate: new Date(2024, 8, 15), // September 15th (months are 0-indexed)
        endDate: new Date(2024, 8, 15),
        color: "blue" // Optional styling field
      }
      // Add more events here via your input form
    ]
  };
}

That's it! When you click an event on the calendar now, onClickEvent will receive the full event object from your array, letting you access all its properties easily.

内容的提问来源于stack exchange，提问作者HTLWelsITLover99