vue 函数不注意使用就报错的坑

最新推荐文章于 2023-03-24 17:27:00 发布
转载 最新推荐文章于 2023-03-24 17:27:00 发布 · 778 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/vhen/p/9012555.html
文章标签：

#javascript #ViewUI

本文讨论了在编程中按钮调用函数时的常见错误，即未正确传递分页参数导致的问题。通过对比错误与正确的调用方式，解释了如何避免将按钮对象属性误作为分页参数传递，强调了在函数调用时使用括号的重要性。

1、声明变量

2、按钮中错误调用

这样接受的pageNum不是1而是按钮对象属性

3、正确调用

加个括号就可以了，不加括号是默认会用参数传过去的，分页就是默认传当前页码

转载于:https://www.cnblogs.com/vhen/p/9012555.html

dbs5592
关注
解析vue data不可以使用箭头函数问题
08-27
Vue 中 data 不可使用箭头函数问题解析 在 Vue 中，data 属性不能使用箭头函数，这是因为箭头函数的 this 指向问题。在 JavaScript 中，非严格模式下，函数都会有一个 this 指向，但是箭头函数的 this 指向的是定义...
vue 解决setTimeOut和setInterval函数无效报错的问题
10-15
问题在于，当在Vue组件的方法中使用`setTimeout`或`setInterval`时，由于函数内部的`this`不再指向Vue实例，而是指向全局对象（在浏览器环境中通常是`window`）。因此，当尝试调用如`this.time()`这样的方法时，...
关闭Vue-cli语法报错
Rolson的博客
09-15 682
Vue-cli中定义组件而未使用时报错,关闭语法提示. 解决方法:在vue项目中创建vue.config.js文件 输入以下代码: module.exports = { lintOnSave: false } 可结束语法报错.
Eslint: vue挂载时render:h =＞ h(App) 第一个h要加括号render:(h) =＞ h(App)否则报错
沐天的博客
12-10 824
当箭头函数只有一个参数时，它们可以省略括号。在所有其他情况下，参数必须用括号括起来。此规则强制在箭头函数中一致使用括号。
取消vue严格模式下 未引用变量error报错问题
优快云JXZK的博客
01-17 824
取消vue严格模式下 未引用变量error报错问题
vue使用h()渲染节点时报警告：
黎小小的博客
03-24 1158
[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance. 使用js方式渲染h()函数节点时，控制台报警告，如下：方法一：将其更改为函数渲染即可方法二：设置默认插槽参考：https://blog.youkuaiyun.com/lys20000913/article/details/122984681https://www.ilaoniu.cn/articles/271
Vue2.0 render:h => h(App)
weixin_30376453的博客
06-09 273
1 new Vue({ 2 3 router, 4 store, 5 //components: { App } vue1.0的写法 6 render: h => h(App) vue2.0的写法 7 }).$mount('#app') render函数是渲染一个视图，然后提供给el挂载，如果没有render那页面什么都不会出来 vue.2....
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
10-14
Vue.js自身和许多现代JavaScript库广泛使用了ES6特性，而IE11并不完全支持这些新特性。以下是一些解决这个问题的方法： **解决方法一：使用Babel-Polyfill** 1. 安装`babel-polyfill`： ```bash npm install --...
当vue在图片加载过程中报错时，采用默认图片作为显示结果
最新发布
11-18
在Vue.js框架下，处理图片加载失败的情况是一个常见问题，在实际应用中，图片加载失败往往会导致用户界面出现异常情况。 为了实现这一功能，我们可以通过以下步骤进行操作：首先，在Vue组件的`data`选项中定义一个...
vue模板用尖括号报错
kakashs
05-02 1805
vue模板<template></template>里用“<”或“>”报错
vue 解决： 双引号，小括号报语法错误，不影响运行
s18301514363的博客
11-11 1928
简单记录一下 如下图存在的问题，但是不影响运行 在项目的根目录有一个： 在他里面配置：/src ok啦???? 啦啦啦(～￣▽￣)～
Vue系列之 => 使用钩子函数的第二个参数传参
weixin_30468137的博客
12-24 836
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
Vue实战：常见报错，及原因
wwwkm123的博客
12-24 319
vue 日常报错大全
a576837179的博客
07-09 220
->vue n.token is not a function 原因：vue绑定的 变量名 和 函数名 重名了
Vue项目遇到的问题解决及优化，如提示框和页码显示
李炸鸡的博客
03-21 935
路由问题： 1.路由组件无法缓存的问题。 这个问题有点傻，因为是通过给nav添加router-link标签来切换子页面的，当时想的就是router-link怎么实现缓存。有天晚上睡不着忽然想到了，router-link与router-view肯定是配套使用的，直接给父组件的router-view标签加一个keep-alive就行了。 <template> <div clas...
关于 Vue 中 h() 函数的一些东西
weixin_47367099的博客
10-27 4731
由于每次渲染视图时都是先创建vnode，然后使用它创建的真实DOM插入到页面中，所以可以将上一次渲染视图时先所创建的vnode先缓存起来，之后每当需要重新渲染视图时，将新创建的vnode和上一次缓存的vnode对比，查看他们之间有哪些不一样的地方，找出不一样的地方并基于此去修改真实的DOM。在vue.js中存在一个VNode类，使用它可以实例化不同类型的vnode实例，而不同类型的vnode实例各自表示不同类型的DOM元素。也就是说，只要组件使用的众多状态中有一个发生了变化，那么整个组件就要重新渲染。
vue中的h函数
热门推荐
weixin_47450807的博客
02-14 2万+
我们一般在编写vue代码时，会首先编写模板代码，也就是template标签中的代码。如果我们想要比模板更加接近编译器，此时我们可以使用渲染函数。 我们编写的代码转化为真正的dom时，首先会先转换为VNode,然后多个Vnode进行结合起来转化为VDOM，最后VDOM才渲染成真实的DOM，此时我们思考一个问题，如果我们直接编写生成vnode的代码，效率会更高，这里我们就是h()函数。h函数我们也可以称为createVnode函数。 一、参数设置 h函数接收三个参数。 第一个参数:，可以为一个html标签，一个
ESlint 中常见报错的类型和解决方案
weixin_43074269的博客
12-16 3245
ESlint 中常见报错的类型和解决方案 这是我在使用 eslint 过程中遇到的一些问题，和自己总结的一些，希望对大家有帮助。 vue 中 quotes 报错 ：不能使用双引号 “ ”，只能使用单引号 ‘ ’； vue 中 indent 报错：报错代码的这行缩进有问题，直接格式化一下，或者设置一下缩进； vue 中 eol-last 报错：代码的末尾没有 enter 回车，或者在 e...
vue注册了却没有使用的错误： component has been registered but not used
idiot_MAN的博客
09-21 5191
如果执行了上面的操作，还是运行不了vue文件。解决办法2：修改项目的package.json。即可：然后关闭vscode，重新启动项目。在package.json中找到。
vue3 mounted函数里面使用pinia报错
04-03
### 解决 Vue3 `mounted` 生命周期中使用 Pinia 出现的错误 在 Vue 3 的组合式 API 中，可以通过 `onMounted` 钩子实现与选项式 API 中 `mounted` 生命周期钩子相同的功能[^1]。当在 `onMounted` 中集成 Pinia 进行状态管理时，如果遇到错误，通常可能是由于以下几个原因： #### 可能的原因分析 1. **未正确初始化 Pinia 实例** 如果在组件中忘记调用 `useStore` 或者没有通过 `app.use(pinia)` 将 Pinia 注册到应用实例上，则可能会导致运行时报错。 2. **异步操作中的上下文丢失** 在某些情况下，如果你在 `onMounted` 中执行了异步逻辑（例如从服务器获取数据），而这些逻辑依赖于 Pinia 提供的状态或方法，可能因为上下文问题或者未等待 Promise 完成而导致报错。 3. **响应式数据的不可变性冲突** 使用 `readonly` 创建的数据是只读的，在开发模式下尝试修改它们会抛出警告或错误[^2]。因此，确保你在 `onMounted` 中不会无意间修改被标记为只读的对象。 #### 示例解决方案 以下是修复该问题的一个完整示例代码片段： ```javascript // 引入必要的模块 import { onMounted } from 'vue'; import { useCounterStore } from '@/stores/counter'; // 假设有一个 counter store export default { setup() { const counterStore = useCounterStore(); // 初始化 Pinia Store onMounted(() => { try { console.log('Current Count:', counterStore.count); // 访问 store 数据 // 执行一些业务逻辑 if (counterStore.count === 0) { counterStore.increment(); // 修改 store 数据 } // 模拟异步请求 setTimeout(() => { console.log('Updated Count After Timeout:', counterStore.count); }, 1000); } catch (error) { console.error('Error during mounted lifecycle:', error.message); } }); return { counterStore }; // 返回给模板使用 }, }; ``` 上述代码展示了如何安全地在 `onMounted` 中访问并更新来自 Pinia 的状态。注意以下几点： - 确保已经导入并注册了对应的 Store。 - 对可能出现异常的地方进行了捕获处理。 - 不要在 `onMounted` 中直接修改由 `readonly` 包裹的数据结构。 #### 关键点总结 - 组合式 API 下的生命周期钩子应以前缀 `on` 形式书写，如 `onMounted` 替代传统的 `mounted` 方法。 - 利用 Pinia 来集中化管理全局状态可以极大简化跨组件通信的需求[^3]。 - 当涉及复杂交互时，请务必验证所有外部库是否已正确定义以及其内部机制是否会干扰当前流程。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值