Error in nextTick: “TurnJsError: The page 1 does not exist“

最新推荐文章于 2023-04-11 16:21:11 发布
最新推荐文章于 2023-04-11 16:21:11 发布
阅读量737 收藏 3
点赞数 1
分类专栏： vue 文章标签： vue.js javascript 前端 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_39921970/article/details/126564161
版权

1、症状

vue翻书效果，报错“vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in nextTick: “TurnJsError: The page 1 does not exist”，如下图
在这里插入图片描述

2、病因

turn.js在加载的时候，api请求的列表还未完成

3、用药

turn.js在加载的时候，api请求的列表还未完成
加个延迟：
在这里插入图片描述

4、疗效

在这里插入图片描述

turn.js 异步请求图片资源，实现电子书翻页效果 报错 ”The page 1 dose not exist”
weixin_42340514的博客
09-18 1545
pc 端时好时坏，时不时报错 经调试发现是异步请求问题，如果渲染前拿到数据就不会报错，否则就会报错。解决方案：改变渲染界面的代码位置，将渲染界面的代码放在异步请求的回调中去，拿到数据后在调用渲染 <!doctype html> <!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-...
在Node.js v12.16.2中，`Process` 对象代表运行中的JavaScript进程，它与操作系统进程有直接联系
BLOG域名:programb.blog.youkuaiyun.com
04-16 1365
每一个启动的 Node.js 脚本都会创建一个新的操作系统级线程或者多线程模型下的工作单元——即所谓的“进程”。: 它用于在当前环境中创建一个新的JavaScript运行环境，新环境拥有自己的独立内存空间。这是实现多线程的一种方式。对象代表了一个运行中的 Node.js 应用程序实例，并且其行为直接映射到操作系统的底层进程机制。: 如前所述，这个方法用于执行一个命令并接收其输出，适合于一次性操作，而不是需要持续交互的情况。对象是一个特殊的内置模块，用于提供关于当前 Node.js 进程的信息和控制方法。
TurnJsError
前端不止的博客
07-19 586
在使用 turnjs 的时候出现了下面的报错 TurnJsError{name: "TurnJsError", message: "Page \"111\" cannot be inserted"} 在官方下载的示例上面进行的二次修改，把 pages: 112 修改为 当前请求获取过来的页码，低于112就会报错。 flipbook.turn({ elevation: 50, acceleration: !isChrome(), autoCenter: true, ...
The page you tried to access (/manager/******) does not exist.的解决方法
weixin_43843824的博客
07-02 3366
今天写一个maven程序的时候遇到了这个错误提示显示错误404 controller层代码如下： 找了半天没找到错误，上网查资料才知道：url：“/manager”开头是错误的。所有不要以/manager开始改掉名称就可以了。 如下图 更改完成后正确运行。 ...
vue 页面报错小计
freedomVenly的博客
03-30 1011
[Vue warn]: Missing required prop: “value” 意思是说数据没有绑定，页面缺少value值。进行v-model数据绑定即可。 2. [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'validate' of undefined" refs 与 ref 内容不一致 ...
在vue中使用turn.js
baidu_39084727的博客
08-05 7775
turn.js是一款实现翻页效果的插件 首先需要安装并引入jQuery，安装完成后引入turn.js 如果使用npm安装引用turn.js会报错 因此需要下载turn.js 到本地，在官网上下载源码，把lib文件拷到assets中， 我在页面中使用了import turn from "../assets/lib/turn"，结果会报turn定义但未使用的错， 不知道为什么，把这句话注释掉就能运行成功了，好像不用引入就能直接用？ <template> <div class="body
Vue3+TypeScript+Django Rest Framework 搭建个人博客（二）：用户登录功能
zgj0607的博客
08-25 1993
用户登录功能是一个信息系统必不可少的一部分，作为博客网站，同样需要管理员登录管理后台，游客注册后登录评论等 大家好，我是落霞孤鹜，上一篇我们已经搭建好了前后端的框架的代码，并调通了前后端接口。从这一篇开始，进入到业务功能开发进程中。 首先我们需要实现的功能是用户登录，用户登录功能虽然在系统开发中已经很成熟，但是当我们自己动手做的时候，会发现这个功能是那种典型的说起来容易，做起来复杂的功能，需要考虑和处理的点很多。 一、需求分析 1.1 完整需求 一个完整的用户登录功能，需要考虑的点如下： 账号和密码的.
Vue 品牌列表自定义局部指令
mqingo的博客
01-07 566
  09品牌列表自定义局部指令.html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scal
Vue 定义全局过滤器,时间格式化
mqingo的博客
01-04 1970
03品牌列表的全局过滤器.html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.
turn.js异步加载实现翻书效果
12-12
本文实例为大家分享了turn.js异步加载实现翻书效果的具体代码，供大家参考，具体内容如下 1、阅读翻书js /** * 电子翻书 */ //var width = 1080; //var height = 1680; var width = "10rem"; var height = "15.2rem"; [removed] = function () { //预加载 //loading(18,1); initData(); } function getQueryString(name) { var result = [removed].search.mat
Error in nextTick
小糖穿越火线
06-15 8332
Error in nextTick 解决：找到使用nextTick的地方，因为在之前数据为空导致的，因此加一个判断在nextTick之前 if (Array.isArray(this.classList) && this.classList.length > 0) { that.$nextTick(() => { ... }); } ...
Vue常见错误---Error in mounted hook
tang
04-11 2万+
Error in mounted hook
turn.js 异步加载实现翻书效果
hins
11-02 6396
1、阅读翻书js /** * 电子翻书 */ //var width = 1080; //var height = 1680; var width = "10rem"; var height = "15.2rem"; window.onload = function () { //预加载 //loading(18,1); initData(); } functio...
vue ie11报错：Error: 参数无效。；[Vue warn]: Error in nextTick: "Error: 参数无效。"
qq_38652744的博客
11-23 2万+
用了v-for循环来渲染页面，但是再IE11就是渲染不出来，检查了很久，发现后台有个数据没有返回，前台取不到，导致整个循环都没出来;这个也有我前台的责任，以后从后台取数据渲染最好加个v-if判断，“如果有，就显示，没有就不显示该数据！” 由于这个问题排查了很久才找到原因故记录下来以此告诫自己。 ...
Error in nextTick: "TypeError: Cannot read property '_wrapper' of undefined"错误提示怎么解决
热门推荐
攻城狮-张小白的博客
07-01 5万+
Error in nextTick: "TypeError: Cannot read property ‘_wrapper’ of undefined"错误， 按平常来说先去代码里找提示错误的某个代码，发现页面代码没有这个，怎么办呢！ 其实这个错误是你的@click事件绑定的方法，在methods并不存在 ...
翻页插件turn.js
大白的博客
01-23 7805
老实说翻页turn.js里面的坑非常多，记得那时候项目中踩了几天都踩不完。个人建议谨慎使用 下面就介绍一下最简单的入门吧~ 1.引入文件部分（注意必须要引入jQ，turn.js文件可以上网找，modernizr也是turn.js的一部分）： 2.注意：必须设置背景颜色或者背景图片，否则透明会看到其他的page html部分: 1 1
Error in nextTick: "ReferenceError: Chart is not defined"
最新发布
02-19
### 解决 `nextTick ReferenceError: Chart is not defined` 错误 当遇到 `ReferenceError: Chart is not defined` 的错误提示时，通常意味着在代码执行环境中未能找到名为 `Chart` 的全局变量或模块。此问题可能源于库未正确加载、路径配置不正确或是初始化顺序不当。 #### 1. 确认依赖安装 确保已经通过 npm 或 yarn 安装了所需的 chart 库，例如 ECharts 或者 Chart.js： 对于 ECharts： ```bash npm install echarts --save ``` 对于 Chart.js： ```bash npm install chart.js --save ``` #### 2. 正确引入库文件 如果是在 Vue 单文件组件内使用，则需确认已在 `<script>` 部分顶部显式导入所需库，并将其赋值给局部变量以便后续调用[^1]。 针对 ECharts 使用情况如下所示： ```javascript import * as echarts from 'echarts'; export default { mounted() { let myChart = echarts.init(document.getElementById('main')); // ... } } ``` 而如果是基于 Chart.js 开发的应用程序，则可以这样操作： ```javascript import { Chart } from 'chart.js/auto'; new Chart(ctx, { type: 'bar', data, }); ``` #### 3. 初始化时机调整 有时由于异步加载或其他因素影响，可能会导致尝试访问尚未完成加载的对象。此时可考虑利用 Vue 提供的生命周期钩子函数来延迟处理逻辑直到 DOM 更新完毕后再继续执行[^3]。 具体做法可以在 `mounted()` 中结合 `this.$nextTick(() => {})` 来保证视图更新完成后才去获取并操纵DOM节点上的图表实例对象。 ```javascript export default { methods: {}, mounted(){ this.$nextTick(() => { const ctx = document.getElementById('myChart'); new Chart(ctx, {...}); }); }, }; ``` 以上措施能够有效预防因过早引用而导致的 `undefined` 类型异常。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

··零··

您的鼓励，是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值