Having trouble finding the solution to assigning a callback's return value to a different property within Vue.js

I am currently utilizing a library called vue-calendar, which includes an object known as calendarOptions. This object contains various methods to control how the calendar functions. One of these methods is the dateClick method, which returns the clicked date on the calendar in string format. I have attempted to save this value in arrivalDate without success. I have researched Vue.set() but believe the issue lies with what 'this' is referencing. In past scenarios, I have resolved similar issues by reassigning 'this' before the function, however, it is not possible in this case.

export default {
  components: {
    FullCalendar,
    Banner
  },
  data() {
    return {
      calendarOptions: {
        plugins: [dayGridPlugin, interactionPlugin],
        initialView: 'dayGridMonth',
        selectable: true,
        dateClick: function(info) {
          this.arrivalDate = info.dateStr
        }
      },
      arrivalDate: ''
    }
  }
}
</script>
javascriptvue.jsthis

Answer №1

Extracted from here

import { Calendar } from '@fullcalendar/core';
import interactionPlugin from '@fullcalendar/interaction';

Utilizing methods is essential

    // a method defined within Vue instance
    export default {
     components: {
      FullCalendar,
      Banner,
    },
    data() {
      return {
        ...
        arrivalDate: '',
        calendar: null,
      };
    },
    methods: {
      dateClick(info) {
        this.arrivalDate = info.dateStr;
      },
    },
    created() {
      const self = this;
      this.calendar = new Calendar(calendarEl, {
        plugins: [ interactionPlugin ],
        dateClick: function(info) {
         self.dateClick(info);
         // or self.arrivalDate = info.dateStr;
        }
      });
}

Simply provide the method to your component

<VCalendar @dateClick="dateClick" ...>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Turn off the scrollbar without losing the ability to scroll

Struggling with disabling the HTML scrollbar while keeping the scrolling ability and preserving the scrollbar of a text area. Check out my code here I attempted to use this CSS: html {overflow:hidden;} Although it partially worked, I'm not complete ...

javascriptjqueryhtmlcss

The resolution of the dynamic imported Vue component was not successful

Upon attempting to import a dynamic component using the import() function, I encountered the following error: [Vue warn]: Failed to resolve async component: function () { return __webpack_require__("./src/components/types lazy recursive ^\\. ...

javascriptvue.jsvue-component

Is there a way to execute a JavaScript function within a loop?

I need to repeatedly call a JavaScript function multiple times. I have attempted to do so in the following way: In Script function changeIt(strgr , idx) { //SomeCode return; } In C# protected void btn_Click(object sender, EventArg ...

c#javascriptasp.net

Ways to transition into a developer role

I'm currently studying Javascript and Dynamic HTML as part of a course, and while I'm not encountering any errors or warnings in Firefox and Chrome, I believe there might be some issues with my code. If anyone would be willing to take a look and ...

javascriptjquerybootstrap-5

Issue with Google charts tooltip displaying literal strings when applied across all fields

this question is quite straightforward. It is inspired by the pie chart example found on the google charts playground Could someone please explain why this code snippet works: function drawVisualization() { // Create and populate the data table. var ...

javascriptgoogle-visualizationpie-chart

Empty css file detected during gulp processing

My Gulp task is saving the CSS file with a size of 0kb. Here is the code snippet: Link to the code gulp.task('jpg', function () { gulp.src('./template/img/**/*.*') .pipe(changed('./dist/img/')) ...

javascriptnode.jsgulpgulp-watchgulp-sass

Creating a universally accessible handlebars helper in ExpressJS

I have a basic handlebars helper file located in helpers/handlebars.js: var hbs = require('express-handlebars'); hbs.registerHelper("inc", function(value, options) { return parseInt(value) + 1; }); Unfortunately, I am unable to utilize the ...

javascriptexpresshandlebars.jshelper

The material-table is utilizing a component as data, but is failing to pass the component context during the onChange

I attempted to include a component as data in a material table, but I'm facing an issue with accessing the 'this' context of the component to update the state within the onChange function. Unfortunately, the editable feature offered by mater ...

javascriptreactjsmaterial-uimaterial-table

What is the best way to implement an Angular application within the child routes of another Angular application?

Is it possible to load an Angular app using lazy-loading (when a specific route is hit by users) into another Angular app without compiling the first one for use in the second? This is the Routing-Module of the app to nest into an Angular app: const upgr ...

javascriptangularangular-module

Previewing multiple images before uploading them using jQuery

Currently, I am utilizing the following code for my image uploader: HTML: <input type="file" id="files" name="files[]" multiple /> <ul id="list"></ul> JavaScript: function handleFileSelect(evt) { var files = evt.target.files; // FileL ...

javascriptjqueryuploadpreview

User interaction with a checkbox triggers a state change in Angular

Here is the code snippet I am working with, where clicking should set the checked value to false: @Component({ template: ` <input type="checkbox" [checked]="checked" (change)="onChange()"> ` }) export class AppC ...

javascriptangulartypescript

Calculating the total of n natural numbers by utilizing a for loop

I have a question that involves calculating the sum of ten natural numbers, but for some reason the code provided is not working as expected. <!DOCTYPE html> <html> <head> <title>Sum of first 10 Natural numbers</title> & ...

javascript

What is the most effective method for implementing an automated system for removing data from a mongoDB database?

My chat bot is currently set up to save records in MongoDB. The object stored in Mongo has a field called expiration_time which represents a number in minutes. { ..., expiration_time: 12451525, ... } Initially, I planned to use setInterval on the web app ...

javascriptnode.jsmongodb

Tips for sharing data between React components without causing re-renders or relying on JSX, such as through a function within functional components

As a beginner in react, I have been struggling to find answers to this issue. I am trying to figure out how to pass data from one functional component to another in react without actually rendering the child component. Does anyone know a solution for this ...

javascriptreactjs

The html carousel displays stacked images instead of scrolling

I have been staring at this code for what feels like an eternity, trying to figure out why it's only displaying stacked pictures instead of a functioning carousel. Perhaps I overlooked something crucial. Could someone please lend a hand? My code is pr ...

javascriptjqueryhtmlcarousel

Switching the background image of a div when hovering over a particular list item

Here is my HTML: <li><a href=""><div class="arrow"></div>List Item</a></li> I'm looking to change the background image of the "arrow" class when hovering over the "List Item" with a mouse. The "arrow" class repres ...

javascriptjqueryhtmlcsshover

How can I retrieve the available filters together with the search query in Elastic Search?

As a newcomer to the world of elastic search, I could use some guidance on querying. I'm also open to any suggestions on modifying my MongoDB Schema. I'm interested in finding out how I can use elastic search to display available products based ...

javascriptmongodbelasticsearchmongoosemongoose-schema

Issues with Vue.js input values failing to update after data modifications

Recently delving into the world of Vue.js, I've encountered some obstacles with reactive datasources in Vue.js. My goal is to code a function that can add and remove a row containing a textfield and a textarea within the parent element. Your code sh ...

javascriptvue.js

Utilizing Angular and Express for routing with the seamless integration of html5mode

I'm facing an issue with making angular and express routing work together with html5mode enabled. When I change state from '/' to my admins state, everything works fine until I refresh the page. Then I only get a json result of admins but my ...

javascriptangularjsexpressangular-ui-router

Knowing the appropriate time to divide a Vue component into multiple components (sub components)

When developing Vue components, what factors should be considered when deciding whether to break up a component into parent and child components or keep it as a single component with more functionality? I have integrated Vue into several areas of a non-SP ...

vue.jsvue-component