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

最新推荐文章于 2023-03-24 17:27:00 发布
最新推荐文章于 2023-03-24 17:27:00 发布
阅读量755 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/vhen/p/9012555.html
本文讨论了在编程中按钮调用函数时的常见错误，即未正确传递分页参数导致的问题。通过对比错误与正确的调用方式，解释了如何避免将按钮对象属性误作为分页参数传递，强调了在函数调用时使用括号的重要性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、声明变量

2、按钮中错误调用

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

3、正确调用

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

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

dbs5592
关注
【Vue】vue3 hooks 中使用 useRouter 报错 push undefined 报错解决方法
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
07-02 1133
确保在setup函数内部使用useRouter和useRoute。如果需要在自定义 Hooks 中使用路由，可以考虑传递全局路由实例作为参数。直接使用全局路由实例是一种可行的解决方案，但应谨慎使用，以避免违反 Composition API 的最佳实践。这种方法允许你在自定义 Hooks 中使用路由功能，同时遵循 Vue 3 Composition API 的设计原则。
关闭Vue-cli语法报错
Rolson的博客
09-15 661
Vue-cli中定义组件而未使用时报错,关闭语法提示. 解决方法:在vue项目中创建vue.config.js文件 输入以下代码: module.exports = { lintOnSave: false } 可结束语法报错.
Eslint: vue挂载时render:h =＞ h(App) 第一个h要加括号render:(h) =＞ h(App)否则报错
沐天的博客
12-10 799
当箭头函数只有一个参数时，它们可以省略括号。在所有其他情况下，参数必须用括号括起来。此规则强制在箭头函数中一致使用括号。
取消vue严格模式下 未引用变量error报错问题
优快云JXZK的博客
01-17 810
取消vue严格模式下 未引用变量error报错问题
vue使用h()渲染节点时报警告：
黎小小的博客
03-24 1083
[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 253
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 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 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
10-14
Vue.js自身和许多现代JavaScript库广泛使用了ES6特性，而IE11并不完全支持这些新特性。以下是一些解决这个问题的方法： **解决方法一：使用Babel-Polyfill** 1. 安装`babel-polyfill`： ```bash npm install --...
vue模板用尖括号报错
kakashs
05-02 1780
vue模板<template></template>里用“<”或“>”报错
vue 解决： 双引号，小括号报语法错误，不影响运行
s18301514363的博客
11-11 1901
简单记录一下 如下图存在的问题，但是不影响运行 在项目的根目录有一个： 在他里面配置：/src ok啦???? 啦啦啦(～￣▽￣)～
Vue系列之 => 使用钩子函数的第二个参数传参
weixin_30468137的博客
12-24 826
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 309
vue 日常报错大全
a576837179的博客
07-09 207
->vue n.token is not a function 原因：vue绑定的 变量名 和 函数名 重名了
Vue项目遇到的问题解决及优化，如提示框和页码显示
李炸鸡的博客
03-21 925
路由问题： 1.路由组件无法缓存的问题。 这个问题有点傻，因为是通过给nav添加router-link标签来切换子页面的，当时想的就是router-link怎么实现缓存。有天晚上睡不着忽然想到了，router-link与router-view肯定是配套使用的，直接给父组件的router-view标签加一个keep-alive就行了。 <template> <div clas...
关于 Vue 中 h() 函数的一些东西
weixin_47367099的博客
10-27 4657
由于每次渲染视图时都是先创建vnode，然后使用它创建的真实DOM插入到页面中，所以可以将上一次渲染视图时先所创建的vnode先缓存起来，之后每当需要重新渲染视图时，将新创建的vnode和上一次缓存的vnode对比，查看他们之间有哪些不一样的地方，找出不一样的地方并基于此去修改真实的DOM。在vue.js中存在一个VNode类，使用它可以实例化不同类型的vnode实例，而不同类型的vnode实例各自表示不同类型的DOM元素。也就是说，只要组件使用的众多状态中有一个发生了变化，那么整个组件就要重新渲染。
vue项目，浏览器报错：ReferenceError: h is not defined
小先生编程
10-03 9056
Jsx语法 遇到这种错误：检查一下自己data(){ }内有没有类似图片上的代码结构的参数。这种属于jsx语法，也能直接将组件渲染出来，但是在某些特定情景下浏览器控制台会报 ReferenceError: h is not defined这个错误 解决办法：在methods（）{} 体内新建一个方法，将上面一整个结构的参数剪贴到方法上。你template 代码块之前调用的data内从参数，现在改为调用methods内从方法问题就解决啦、 ...
Vue自定义指令
jiandan7410的博客
08-15 207
Vue自定义指令使用：directives 自定义指令就是在vue中可以自己定义一些指令去运用：例： v-text:vue中的指令 v-ztext:自定义指令：（可以自己随意定义，v-****) 自定义指令写法： <span v-ztext="n"></span> <script> new Vue({ el:'#root', data:{ name:'尚硅谷', n:1 }, directives:{ //写法一：简写
ESlint 中常见报错的类型和解决方案
weixin_43074269的博客
12-16 3192
ESlint 中常见报错的类型和解决方案 这是我在使用 eslint 过程中遇到的一些问题，和自己总结的一些，希望对大家有帮助。 vue 中 quotes 报错 ：不能使用双引号 “ ”，只能使用单引号 ‘ ’； vue 中 indent 报错：报错代码的这行缩进有问题，直接格式化一下，或者设置一下缩进； vue 中 eol-last 报错：代码的末尾没有 enter 回车，或者在 e...
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]。 - 当涉及复杂交互时，请务必验证所有外部库是否已正确定义以及其内部机制是否会干扰当前流程。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值