时间戳

首页 > 解决方案 > bulma-calendar 未更新为 Vue.js 组件

vue.js - bulma-calendar 未更新为 Vue.js 组件

问题描述

我正在学习 Vue.js，并想在我的应用程序中实现 bulma-calendar 模块。我走了这么远，但是当我选择新日期时，日历不知何故没有更新。

抱歉，如果我不能更详细地说明问题，正如我所说的，声明式编程对我来说是非常新的。

我从bulma-calendar官网得到的模板：https ://demo.creativebulma.net/components/calendar/v6//#integration

Vue.component("comp-calendar", {
  template: `
    <div>
        <input ref="calendarTrigger" type="date">
    </div>
    `,

  data: function () {
    return {
      date: new Date(),
    };
  },

  mounted: function () {
    const options = {
      type: "date",
      color: "danger",
      dateFormat: "DD-MM-YYYY",
      startDate: this.date,
      displayMode: "inline",
    };
    const calendar = bulmaCalendar.attach(
      this.$refs.calendarTrigger,
      options
    )[0];
    calendar.on("date:selected", (e) => (this.date = e.date));
  },
});

var app = new Vue({
  el: "#app",
});
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- import bulma -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
    <!-- import bulma-calendar -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-calendar@6.0.9/dist/css/bulma-calendar.min.css">
</head>

<body>
    <div id="app">
        <comp-calendar></comp-calendar>
    </div>

    <!-- import bulma-calendar -->
    <script src="https://cdn.jsdelivr.net/npm/bulma-calendar@6.0.9/dist/js/bulma-calendar.min.js"></script>
    <!-- import https://vuejs.org -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script src="src/js/test.js"></script>
</body>

有什么帮助吗？谢谢

编辑：没有帮助：

[...]
<input type="date">
[...]
const calendar = bulmaCalendar.attach('[type="date"]', options)[0];
calendar.on("select", (e) => (this.date = e.date))

标签： vue.jsbulma

解决方案

可能是 6.0.9 中的错误。使用 6.0.0（根据此处的文档：https ://creativebulma.net/product/calendar/demo ）工作正常。

推荐阅读