vue常见报错原因及解决

简介: vue常见报错原因及解决

1. 关键词 Uncaught Error: [vuex] mutations should be function but "mutations.actions" in module "user" is {}.


原因:写错行

解决:写到methods函数里面

2. import 导入错误


关键词:TypeError: Object(...) is not a function

原因:导入错误。检查是默认导出,还是按需导出。最坑的是有时候是祖宗级导出错误。排查半天。

3. 关键词This relative module was not found


原因:路径问题。如果你用的是vscode的话,新建文件的时候稍不注意,就成了下面这样:

image.png

解决:最好再建一个文件夹,测试是否正确。

4. 报错400:


报错如下POST http://toutiao-app.itheima.net/v1_0/authorizations 400 (BAD REQUEST)

原因:api接口文档需要的类型人家要字符串你不要写数字之类的按照人家定的来,还有比如说人家要code和name两个参数,不能自己改,像收集两个参数的可以用对象写

解决:检查参数

5.有赞vant插件库坑爹操作:


image.png

原因及解决:


1-全局引入的话 this.$toast('提示文案')、this.$toast({})


2-按需求引入的话,Toast('提示内容'); 、Toast.loading({})是挂载在原型上的,所以用的时候,加this.$XXX


还有就是全局和按需的大小写不一样,vant需要使劲往下拉才能看到,按需引入格式。

6 报错:401


image.png

原因:权限问题

解决:vuex+本地存储 

7 报错:一大堆


image.png

原因: v-for的时候,key 的值重复,就会报一大堆错误

解决:找一个唯一的id

8 使用有赞在插件库。设置样式,样式失效


频道列表,往下滚动列表消失--是因为套了一层div,没有任何样式 ,就会导致固定定位失效。错误显示为样式无效,顶部栏跟随消失

结论:不要乱加父元素

9 关键词:Network Error


image.png

原因及解决后台服务器没开

10 关键词:


image.png

点击事件的函数,没有写在methods函数里面。报错  



相关文章
|
1天前
|
JavaScript 网络架构
|
1天前
|
JavaScript 前端开发 Java
vue-day03 组件基础
文章介绍了Vue.js中组件的基础概念、注册格式、命名方式、全局与局部注册的区别、prop属性的详细使用以及通过prop向子组件传递数据的方法,并提供了计数器和博文小组件的实例。
|
1天前
|
人工智能 JavaScript 索引
Duplicate keys detected: This may cause an update error.【Vue遍历渲染报错的解决】
这篇文章讨论了在Vue中进行列表渲染时遇到的“Duplicate keys detected”错误。这个错误通常发生在使用 `v-for` 指令渲染列表时,如果没有为每个循环项指定一个唯一的 `key` 属性,或者指定的 `key` 属性值重复了。文章提供了导致错误的原始代码示例,并给出了修正后的代码,通过在 `key` 绑定中加入索引确保 `key` 的唯一性。此外,文章还解释了为什么需要唯一 `key` 以及如何解决这个问题。
Duplicate keys detected: This may cause an update error.【Vue遍历渲染报错的解决】
|
1天前
|
缓存 移动开发 JavaScript
查漏补缺方为上策!!两万六字总结vue的基本使用和高级特性,周边插件vuex和vue-router任你挑选
该文章全面总结了Vue.js的基本使用方法与高级特性,并介绍了Vue周边的重要插件Vuex和Vue-Router的使用技巧。
查漏补缺方为上策!!两万六字总结vue的基本使用和高级特性,周边插件vuex和vue-router任你挑选
|
1天前
|
JavaScript
Vue Cli 脚手架安装
本文介绍了如何使用npm和cnpm淘宝镜像加速来安装Vue CLI脚手架工具,并验证安装成功。接着,通过Vue CLI创建新项目,并启动项目服务。
Vue Cli 脚手架安装
|
1天前
|
JavaScript
vue 计算属性,实现复选框的全选和反选 【小案例】
本文通过一个Vue.js小案例,展示了如何使用计算属性实现复选框的全选和反选功能。计算属性的完整写法包括get和set两部分,分别用于获取值和设置值。在全选和反选的场景中,计算属性的get方法用于判断所有复选框是否都已选中,从而控制全选复选框的状态;计算属性的set方法则用于根据全选复选框的状态,批量更新每个复选框的选中状态。通过示例代码和效果图,文章清晰地说明了计算属性在实现这一功能中的作用和效果。
vue 计算属性,实现复选框的全选和反选 【小案例】
|
1天前
|
JavaScript 索引
轮播图,用vue来写一个简单的轮播图
本文介绍了如何使用Vue.js编写一个简单的轮播图功能,包括左右箭头的点击事件处理和使用v-bind、v-show指令进行图片地址绑定和箭头显示隐藏的逻辑。
轮播图,用vue来写一个简单的轮播图
|
1天前
|
JavaScript 前端开发
vue-day03 v-on事件处理,表单输入绑定
文章介绍了Vue.js中事件处理和表单输入绑定的使用。包括v-on指令监听事件、事件处理方法、内联处理器、访问原生DOM事件、事件修饰符、按键修饰符、系统修饰符、exact修饰符和鼠标按钮修饰符。同时,讲解了如何使用v-model实现单行文本、多行文本、复选框和单选按钮的双向数据绑定,并提供了修饰符的使用示例。这些特性使得Vue.js在处理表单输入和事件时更加灵活和方便。
vue-day03 v-on事件处理,表单输入绑定
|
1天前
|
开发框架 JavaScript 前端开发
手把手教你剖析vue响应式原理,监听数据不再迷茫
该文章深入剖析了Vue.js的响应式原理,特别是如何利用`Object.defineProperty()`来实现数据变化的监听,并探讨了其在异步接口数据处理中的应用。
|
1天前
|
JavaScript
vue中组件的局部注册和全局注册
本文介绍了Vue中组件的局部注册和全局注册的方法,并通过示例代码展示了如何在特定组件或整个Vue应用中注册和使用自定义组件。