如何更新vForm输入值

Question

我用的是 v表格 与 全日历当我点击日历上的一个事件时，它打开了带有表单和输入的模态，我从Fullcalendar eventclick()方法将数据发送到vForm，但它没有显示在表单中，表单输入是空的。

失败1：

<script>
import "fullcalendar/dist/fullcalendar.min.js";
import "fullcalendar/dist/fullcalendar.min.css";
import { Form, HasError, AlertError } from "vform";

Vue.component(HasError.name, HasError);
Vue.component(AlertError.name, AlertError);

var editTitle = "";
var editStart = "";
var editEnd = "";
var editdesc = "";

export default {
  props: ["workingHours"],
  mounted() {
    const date = new Date();
    const d = date.getDate();
    const m = date.getMonth();
    const y = date.getFullYear();

    const events = this.workingHours;

    $("#full-calendar").fullCalendar({
      events,
      height: 800,
      header: {
        left: "month,agendaWeek,agendaDay",
        center: "title",
        right: "today prev,next"
      },
      eventClick: function(calEvent, jsEvent, view) {
        editStart = calEvent.start.format("MM/DD/YYYY, h:mm a");
        editEnd = calEvent.end.format("MM/DD/YYYY, h:mm a");
        editTitle = calEvent.title;
        editdesc = calEvent.desc;
        var xpos = jsEvent.pageX;
        var ypos = jsEvent.pageY;
        $("#calendar-edit").modal("show");
        console.log(editTitle); //at this stage the editTitle variable is updated with the new value but down in the form the title is not updated with the new value

        return false;
      }
    });
  },
  data() {
    return {
      // Create a new form instance
      form: new Form({
        title: editTitle, //here the value is not updated with the new value so the input in the form is empty
        start: editStart,
        end: editEnd,
        desc: editdesc
      })
    };
  },

  methods: {
    updateEvent() {
      // Submit the form via a PUT request
      this.form.put("/api/workinghours/update/" + 1).then(({ data }) => { //don't worry about the plus one i'm using it for testing purpose
        console.log(data);
      });
    }
  }
};
</script>

失败2:

<script>
import "fullcalendar/dist/fullcalendar.min.js";
import "fullcalendar/dist/fullcalendar.min.css";
import { Form, HasError, AlertError } from "vform";

Vue.component(HasError.name, HasError);
Vue.component(AlertError.name, AlertError);

export default {
  props: ["workingHours"],
  mounted() {
    const date = new Date();
    const d = date.getDate();
    const m = date.getMonth();
    const y = date.getFullYear();

    const events = this.workingHours;

    $("#full-calendar").fullCalendar({
      events,
      height: 800,
      header: {
        left: "month,agendaWeek,agendaDay",
        center: "title",
        right: "today prev,next"
      },
      eventClick: function(calEvent, jsEvent, view) {
        this.form.start = calEvent.start.format("MM/DD/YYYY, h:mm a");
        this.form.end = calEvent.end.format("MM/DD/YYYY, h:mm a");
        this.form.title = calEvent.title; //So for this I'm using the Vform's API to update the values but it gives error that the title is not defined
        this.form.desc = calEvent.desc;
        var xpos = jsEvent.pageX;
        var ypos = jsEvent.pageY;
        $("#calendar-edit").modal("show");
        return false;
      }
    });
  },
  data() {
    return {
      // Create a new form instance
      form: new Form({
        title: "", //here the value  still is not updated with the new value so the input in the form is empty
        start: "",
        end: "",
        desc: ""
      })
    };
  },

  methods: {
    updateEvent() {
      // Submit the form via a PUT request
      this.form.put("/api/workinghours/update/" + 1).then(({ data }) => { //don't worry about the plus one i'm using it for testing purpose
        console.log(data);
      });
    }
  }
};
</script>

Answer 1

所以在@ADyson的帮助下，我可以使它工作，感谢他，我一直在使用一个旧的版本，首先，更新到最新的版本，并改变了Fullcalendar库的VUE版本，所以现在的事件点击触发是改变vForm的输入值，我将添加整个代码下面试图添加注释。vue-datetime 我认为这个问题更多的是与javascript中的datetime格式有关，所以我想办法在datetime组件上添加badge来显示旧的值。我知道这不是正确的方法，但现在还不错。

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