javascript - Nuxt.js 文档未定义(vuejs-datepicker)

Question

我做了所有的事情(也许)来解决这个问题，但我的小错误不断出现....:(

第一的。我的错误-
第一次加载页面时，我的“vuejs-datepicker”运行良好。
但是当我重新加载它时，出现“引用错误”......
my error screen

第二。我做了什么-

添加/plugins/vuejs-datepicker 文件

import Vue from 'vue';
import Datepicker from 'vuejs-datepicker';

Vue.use(Datepicker);

添加plugins : [{ src: '~plugins/vuejs-datepicker', ssr: false }]在 nuxt.config.js

使用 client-only在模板中
<client-only>
<datepicker :inline="true"></datepicker>
</client-only>

第三。甚至这样做-

在/plugins/vuejs-datepicker 文件中，
更改 Vue.use(Datepicker)至Vue.component('vuejs-datepicker',DatePicker)

在Vue的脚本中，
更改 components: {datepicker}至components: {'datepicker': () => import('vuejs-datepicker')},

那么，我现在还应该做什么？？
有任何想法吗？
谢谢..

Answer 1

你快到了!
这意味着 vuejs-datepicker 不适用于 SSR。
我遇到了同样的问题，关注 this guide我可以解决问题。

首先你必须安装组件

npm i vuejs-datepicker

其次，您需要在 plugins 下创建一个插件文件目录，例如:vue-datepicker.js内容如下:

import Vue from 'vue'
import Datepicker from 'vuejs-datepicker'
Vue.component('date-picker', Datepicker)

在此步骤中，您将注册为 date-picker在您的组件的上下文中，从 vuejs-datepicker 导入, 这个名称很重要，因为它是您将使用的原始 datepicker 的 insted .

下一步是在 nuxt.config.js 中注册您的新插件

plugins : [
          ...OthersPlugins,
           { src: '~/plugins/vue-datepicker', mode: 'client' }
          ] 

这样，您将仅从客户端使用此组件。

最后一步是使用您的日期选择器作为 date-picker在您的组件或页面中，但现在使用第二步中使用的名称

<date-picker ..options/>

你不需要在组件中导入任何东西，这个 date-picker now 在项目中的每个组件或页面上都可用。

最后一步是可选的，用 client-only 包裹这个日期选择器。标记，如果您想在日期选择器加载时显示任何消息。

有关这方面的更多信息，请阅读:

configuration-plugins

components-client-only