内容仅在重新加载后显示

Posted 2023-03-16

【中文标题】内容仅在重新加载后显示

【英文标题】：Content Will Only Display After Reload

【发布时间】：2022-01-08 23:02:39

【问题描述】：

我正在尝试显示基于 jsCalendar 库的简单日历。当我导航到页面时，日历不会出现；但是，当我重新加载页面[⌘-R]或直接输入页面URL时，内容正常显示。我在 Safari 和 FireFox 中测试过，行为是一样的。

预期结果：

通过 Vue Router 或直接导航到达页面时显示内容。

日历.vue

<template>
    <div class="auto-jsCalendar black-theme"
         data-navigator-position="right"
         data-month-format="month YYYY"
         data-day-format="DDD">
    </div>
</template>

<script>
import 'simple-jscalendar'

  export default 
    emits: ['page-data'],
    mounted() 
      this.$emit('page-data', title: 'calendar', content: '',)
    ,
  
</script>

<style>
  @Import '~simple-jscalendar/source/jsCalendar.css';
  @Import '~simple-jscalendar/themes/jsCalendar.darkseries.css';
</style>

导航到 Calendar.vue

导航到页面时，div 如下所示：

<div class="auto-jsCalendar black-theme" data-navigator-position="right" data-month-format="month YYYY" data-day-format="DDD"></div>

重新加载或直接导航

在重新加载页面或直接在浏览器中输入 URL 时，div 如下所示：

<div class="auto-jsCalendar black-theme" data-navigator-position="right" data-month-format="month YYYY" data-day-format="DDD" jscalendar-loaded="true"></div>

（导航到页面时没有建立动态属性jscalendar-loaded（显示日历对象时添加到div中）。）

环境：

Dave@[SNIP] my_spa % npm list
my_spa@0.1.33 /.../my_spa
├── @vue/cli-plugin-babel@4.5.15
├── @vue/cli-plugin-router@4.5.15
├── @vue/cli-plugin-vuex@4.5.15
├── @vue/cli-service@4.5.15
├── @vue/compiler-sfc@3.2.20
├── babel-eslint@10.1.0
├── chart.js@3.6.0
├── chartjs-plugin-annotation@1.1.0
├── chartjs-plugin-datalabels@2.0.0
├── core-js@3.19.0
├── eslint-plugin-vue@7.20.0
├── simple-jscalendar@1.4.4
├── vue-router@4.0.11
├── vue@3.2.20
├── vue3-smooth-dnd@0.0.2
├── vuex-persist@3.1.3
└── vuex@4.0.2

编辑：在咨询 jsCalendar 的作者时，我了解到脚本作用于页面加载事件，这解释了为什么导航到视图时内容不更新。外部脚本有一个autoFind() 函数，可以从mounted() 调用它应该更新内容；但是，我一直无法找到调用该函数的正确方法。

import jsCalendar from 'simple-jscalendar'

mounted() 
  jsCalendar.autoFind()
  this.$emit('page-data', title: 'calendar', content: '',)
,

结果：

Unhandled Promise Rejection: TypeError: simple_jscalendar__WEBPACK_IMPORTED_MODULE_0___default.a.autoFind is not a function.

【问题讨论】：

可能是这个库有一个准备就绪的处理程序，可以在页面加载时对其进行初始化？然后我会尝试在挂载的钩子中调用这个init方法。

虽然最有可能编写一个包装器来支持这个库（或分叉它），但这超出了我目前的技能范围。相反，我能够找到另一个非常棒的 Vue 3 兼容库 v-calendar 来满足我的需求。

【参考方案1】：

我查看了链接中的文档，这就是我要做的： 从 div 中删除 auto-jsCalendar，因为这是在加载页面时使其工作的钩子，但在导航和添加 ref 时不会工作。 然后在您挂载的钩子中调用jsCalendar.new，如此处所述： https://gramthanos.github.io/jsCalendar/docs.html（javascript 创建日历）

<template>
    <div class="black-theme"
         data-navigator-position="right"
         data-month-format="month YYYY"
         data-day-format="DDD"
         ref="calendar">
    </div>
</template>

<script>
import 'simple-jscalendar'

  export default 
    emits: ['page-data'],
    mounted() 
      jsCalendar.new(this.$refs.calendar)
      this.$emit('page-data', title: 'calendar', content: '',)
    ,
  
</script>

<style>
  @Import '~simple-jscalendar/source/jsCalendar.css';
  @Import '~simple-jscalendar/themes/jsCalendar.darkseries.css';
</style>

虽然从长远来看，我建议寻找一个为 Vue 构建的库。如果第三方库操作同样来自 Vue 的 DOM，这总是有点棘手。

【讨论】：

感谢您抽出宝贵时间。不幸的是，通过这种结构，我得到了Can't find variable: jsCalendar 错误。所以我将导入更改为import jsCalendar from 'simple-jscalendar' and I get a new is not a function` 错误。我将继续修补您引用的 API 调用，看看我是否能找到一些东西。你可能是对的，这个库（虽然非常棒）不适合 Vue。干杯。

那应该是new is not a function 错误。

@DaveL17 还有其他例子，也许new jsCalendar(this.$refs.calendar); 有效

是的，也试过了。导致object is not a constructor 错误。