如何更新 vForm 输入值

Question

我正在使用 vForm with FullCalendar，并且我正在使用 bootstrap 模式来编辑日历上的事件。当我在日历上单击一个事件时，它会打开带有表单的模式，它是输入，我将数据从 Fullcalendar eventclick() 方法发送到 vForm，但它没有显示在表单中，并且表单输入为空。到目前为止，这是我尝试过的方法，其中 none 个有效，我添加了注释以使事情更清楚：

失败 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 的 vForm 和 Fullcalendar 库之外，当将值发送到表单时组件输入值为空我认为这个问题与 [=14= 中的日期时间格式更相关]，所以我欺骗了在日期时间组件上添加徽章以显示旧值。我知道这不是正确的做法，但现在它很好

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

如何更新 vForm 输入值

How to update vForm input value

javascript

jquery

fullcalendar

vue.js

fullcalendar-3