日期選擇器在另一個路由頁面中不起作用，或者在vue js中返回時不起作用？

Question

我正在使用vue js應用程序，有兩個路由頁面A和B.兩者都包含帶有3個日期選擇器的設置選項。 如果我在A頁中，那A頁的日期選擇器正在工作，但是當我轉到B頁時，它不起作用。 即使我再次回到頁面A，它也不起作用。 僅在刷新頁面后才能工作。

 $(function () { /// col 1 DateTimePicker $('#col1vis').datetimepicker({ format: 'YYYY-MM-DD' }); $('#col1bis').datetimepicker({ format: 'YYYY-MM-DD', useCurrent: false //Important! See issue #1075 }); $("#col1vis").on("dp.change", function (e) { $('#col1bis').data("DateTimePicker").minDate(e.date); }); $("#col1bis").on("dp.change", function (e) { $('#col1vis').data("DateTimePicker").maxDate(e.date); }); /// col 2 DateTimePicker /// col 2 DateTimePicker $('#col2vis').datetimepicker({ format: 'YYYY-MM-DD' }); $('#col2bis').datetimepicker({ format: 'YYYY-MM-DD', useCurrent: false //Important! See issue #1075 }); $("#col2vis").on("dp.change", function (e) { $('#col2bis').data("DateTimePicker").minDate(e.date); }); $("#col2bis").on("dp.change", function (e) { $('#col2vis').data("DateTimePicker").maxDate(e.date); }); /// col 2 DateTimePicker $('#col3vis').datetimepicker({ format: 'YYYY-MM-DD' }); $('#col3bis').datetimepicker({ format: 'YYYY-MM-DD', useCurrent: false //Important! See issue #1075 }); $("#col3vis").on("dp.change", function (e) { $('#col3bis').data("DateTimePicker").minDate(e.date); }); $("#col3bis").on("dp.change", function (e) { $('#col3vis').data("DateTimePicker").maxDate(e.date); }); }); 

Answer 1

您絕不能對Vuejs管理的元素進行更改，因為Vue不會意識到該更改，並且會繼續進行下去，並在下一個更新周期中將其覆蓋。

因此，您可以嘗試將datepicker包裝到一個新組件中，或者更好地，嘗試在Vue中思考，然后將jQuery放下。

您可以在以下鏈接中了解如何在Vuejs中安全地使用jQuery： https ://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/