【发布时间】：2020-05-18 07:46:28
【问题描述】：
我正在使用 vForm 和 FullCalendar，并且我正在使用引导模式来编辑日历上的事件。当我单击日历上的事件时，它会打开带有表单的模式并且它是输入的，并且我从 Fullcalendar eventclick() 方法将数据发送到 vForm 但它没有显示在表单中并且表单输入是空的。这是我迄今为止尝试过的，但它们都不起作用，我添加了 cmets 以使事情更清楚：
失败 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>
【问题讨论】：
-
您使用旧版本的fullCalendar，并且没有使用fullCalendar现成的Vue组件的任何具体原因？见fullcalendar.io/docs/vue。我不是 vue 专家，但我不禁想到它可能会使您的集成更容易。
-
是的，它是旧版本，它是第 3 版。第 4 版是最新的，第 5 版即将推出。据我所知，不会再发布 3 的更新或修复。所以现在不是开始使用它的好时机。由于它只是在您的页面中定义为脚本，因此我认为您可以轻松地将其替换为较新的版本。
-
是的，但如果你还记得的话，我的想法是使用 vue 组件来表示日历可能有助于集成。我不知道 vue，但您似乎在变量范围或时间如何/何时将值收集到表单对象中存在问题。
-
您确实可以访问所有内容。没有缺少的功能。 dateClick 仅作为示例给出。但是您可以以同样的方式使用 eventClick。 （注意 eventClick 不是 eventObject！）。
-
你检查v4 documentation for eventClick了吗？还是v3-v4 upgrade guide？函数签名已更改。现在函数中只有一个传入对象，其中包含所有不同的项目作为属性。 （即使它没有改变，将整个事件对象分配给您的标题字段也是没有意义的，就像您的代码试图做的那样。）。
标签： javascript jquery vue.js fullcalendar fullcalendar-3