0

我已经尝试了所有我能想到的让 vue-luxon 在我的 Laravel 8 / Vue 3 应用程序上工作的方法,但是失败了。我根据文档遵循了这些步骤:

npm install vue-luxon;

文档没有说明在哪里,但我将这句话放在了我的 app.js 文件中:

import VueLuxon from "vue-luxon";

据我了解,这一行必须更改为 App.use(VueLuxon) 并且也放在 app.js 中:

Vue.use(VueLuxon);  

而且(根据文档),就是这样......我应该可以打电话:

this.$luxon("2020-10-05T14:48:00.000Z")

显示格式化的日期,但我在控制台上不断收到此错误:

未捕获的类型错误:this.$luxon 不是函数

这是我的 resources/js/app.js 文件的内容:

import { createApp } from 'vue';
import App from './components/App.vue'
import VueLuxon from "vue-luxon";

createApp({
    components: {
        App,
    }
}).mount("#app")

App.use(VueLuxon)

以及我的 js/components/App.vue 文件的内容:

<template>
<div class="flex flex--column flex--align-center flex--justify-center">
    <div class="logos">
        <img src="../../static/img/laravel.png" width="240" alt="" />
        <img src="../../static/img/vue.png" width="240" alt="" />
    </div>

    <div class="title">
        <h1 class="vue">Vue 3</h1>
        <h1 class="plus">+</h1>
        <h1 class="laravel">Laravel 8</h1>
    </div>

    {{ this.$luxon("2020-10-05T14:48:00.000Z") }}

</div>
</template>

<script>
// import VueLuxon from "vue-luxon"; // I´ve tried importing luxon here... doesn't work either.

export default {
    mounted() {
        console.log("Component mounted.");
    },
};
</script>

我尝试将导入直接放在组件上,注册为应用程序组件或任何可能的组合,结果相同。我肯定错过了一些东西,所以任何帮助将不胜感激。

谢谢!

4

2 回答 2

4

您可以在 vue 3 中使用 globalProperties:

在你的 main.js

const { DateTime } = require("luxon");
app.config.globalProperties.$luxonDateTime = DateTime;

然后在您的模板中:

<template>
{{ $luxonDateTime.fromISO("2020-10-05T14:48:00.000Z").toRelative() }}
</template>

你会得到“6个月前”

于 2021-04-12T06:56:56.777 回答
1

首先,你不要使用“this”。在模板中。

根据官方存储库,此插件与 Vue 3 不兼容,仅与 Vue 2 兼容(至少目前如此)。

来源:https ://github.com/casbloem/vue-luxon/issues/21

解决方案:

  1. 等待更新。
  2. 分叉此存储库(并在之后发出拉取请求)。
  3. 由于它在后台使用 luxon 库,因此为它编写自己的包装器。https://github.com/moment/luxon
  4. 寻找处理日期的替代方案。
于 2021-04-10T00:23:13.650 回答