[Vuejs]-How to update vForm input value

by

0👍

✅

So with the help of @ADyson I could make it work thanks to him, I have been using an old version first and updated to the latest version and changed the Fullcalendar library to VUE version. so now the event click is triggered is changing the input values of the vForm I will add the entire code below trying to add comments too. the only issue now is beside using vForm and Fullcalendar libraries I’m using vue-datetime and when sending the values to the form the component input value is empty I think the issue is more related to the datetime format in javascript, So I have tricked to add badge over the datetime components to show the old values. I know it’s not the right way of doing it but for now it’s good

<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";

var eventID = 0;
export default {
  props: ["workingHours"],
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data: function() {
    return {
      calendarPlugins: [
        // plugins must be defined in the JS
        dayGridPlugin,
        timeGridPlugin,
        interactionPlugin // needed for dateClick
      ],
      calendarWeekends: true,
      form: new Form({
        title: "",
        start: "",
        end: "",
        desc: ""
      })
    };
  },
  methods: {
    handleDateClick(info) {
        eventID = info.event.id;
        const startTime = moment(info.event.start).format('yyyy-MM-DD hh:MM:SS');
        const endTime = moment(info.event.end).format('yyyy-MM-DD hh:MM:SS');
        this.form.title = info.event.title;
        this.form.start = startTime;
        this.form.end = endTime;
        this.form.desc = info.event.extendedProps.desc;
        $("#disabledStart").html(startTime);
        $("#disabledEnd").html(endTime);
        $("#calendar-edit").modal("show");
        console.log(info.event.start);
        console.log(startTime);
        console.log(info.event.id);
    },
    updateEvent() {
      // Submit the form via a PUT request
      this.form.put("/api/workinghours/update/" + eventID).then(({ data }) => {
        console.log(data);
        $("#calendar-edit").modal("hide");
      });
    }
  }
};
</script>

Leave a comment