前端vue交互过程中犯过的错

最新推荐文章于 2023-10-11 19:05:25 发布
最新推荐文章于 2023-10-11 19:05:25 发布
阅读量265 收藏
点赞数
分类专栏： 学习笔记 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mjxiaomihu/article/details/126030484
版权

1、接口响应数据中有值，渲染到页面没有，一定是取值的数据结构写错了，这个时候要检查下取值的数据结构是否和接口响应数据相同，通常会丢了数据外层的结构，如下图丢了data直接写res.account控制台报undefind错误

2、=与==混淆 ，=是赋值 ，==是判断，如下图判断的场景不能写成赋值

3、 el-select组件中el-option要写value和label，label展示给用户看，value传给服务端 

 

4、 使用map处理数组数据

如图先声明一个types数组，使用map方法对原有数据生成新数组，由于数据中businessType是从1开始，所以types中的取值需要 businessType-1，拼接成想要的数据，最后返回该数据。

 

 5、使用filter过滤数组时一定要写明过滤条件 

 

小迷糊MJ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
unity打包成webgl与vue交互demo
04-24
工程是vue嵌套webgl，里面有unity和vue两个工程的代码
uView中u-upload上传点击无效问题
Zxl_sir的博客
09-26 2784
在开发微信小程序时，做一个上传头像的功能，我这里采用了uViewUi中的u-upload组件，出现了点击上传无效果没有反应问题，排查后问题出现原因是因为小程序没有获取到用户隐私权限导致，组件内部报错，大致意思“请确认是否拥有访问权限”，这就想到了微信小程序官方最近更新的隐私授权问题。总结：目前小程序对于用户隐私做了一些调整，在需要获取用户隐私的页面需要授权才行，这个授权弹窗最好加在小程序首页，以防出现各种报错问题。// 同意后所执行的代码逻辑，看需添加此方法。
uniapp + uview 多图上传
m0_47668952的博客
09-16 546
<view class="upload-img"> <u-form-item label-width="150"> <u-upload ref="iupload" :style="{opacity: evaluationData.length > 6 ? 0 : ''}" width="150" height="150" :file-list="multipleImgs" :action="httpUrl
uview--上传图片
qq_44161703的博客
07-19 1541
name: 上传文件的字段名，供后端获取使用。multiple: 是否开启图片多选，部分安卓机型不支持。在合适的位置上 放上 上传图片的一段代码。fileList5：图片显示集合。max-count ：最大选择图片的数量。afterRead5 ：上传之后参数函数。项目中引入uview 库 （详见）deletePic5： 删除图片。可以自定义图片：----------在 uview 官网。
小程序uView2.X框架upload组件上传方法总结+避坑
shi15926lei的博客
10-11 5250
相信很多人写小程序会用到uView框架,总体感觉还算OK吧,只能这么说,肯定也会遇到图片视频上传,如果用到这个upload组件相信你,肯定遇到各种各样的问题,这是我个人总结的单图片和多图片上传方法.2.3 上传成功的回调 主要是是上传的是一个json格式 一定要进行处理 JSON.parse(res.data).path,2.2上传之前做的事情,比如 限制格式 限制大小 这点比较麻烦 ,里面注释写的比较详细。3.上传前限制 大小 图片 格式 里面注释写的很详细。1.需要修改这个属性。
常见前后端交互错误总结（一）
qq_44564864的博客
12-02 1079
后端参数接收 @PathVariable 作用: 接收url地址中的参数 注意事项: 如果请求的参数较多 则不建议使用restFul结构.代码优化 总结: 写配置类(Spring Security集成与入门) 问题1问题位置：shf(二手房管理项目当中，项目的认证与登录验证)在配置Spring Security中，使用java
创建vue2项目 前端以及后端交互
04-20
创建vue2项目 前端以及后端交互
前端Vue2.0 + Echarts图表应用
07-25
推荐理由：Vue2.0作为一款流行的前端框架，与Echarts图表库的结合可以轻松实现灵活、可定制的数据可视化。Vue的响应式特性使得数据与图表之间能够实时同步，通过简单的配置和组件化开发，可以快速搭建各种类型的图表...
前端Vue学习技术大纲以及学习文章
02-26
适合人群：想要学习前端Vue的小白，梳理复习知识的学习者 能学到什么：通过Vue CLI（命令行界面）工具可以快速创建和管理Vue.js项目。使用Vue CLI可以自动配置开发环境，并提供了许多实用的命令和工具，方便开发者...
基于Vue的宾馆管理系统前端设计源码
最新发布
04-16
该项目是宾馆管理系统的Vue前端部分，提供了用户界面和交互功能。系统支持用户登录、查看房间信息、预订房间、查询订单等功能。通过该系统，用户可以方便地管理自己的住宿需求，宾馆工作人员也可以通过系统进行房间...
vue的页面后端拿到数据后,前端没能正常显示
github_66624340的博客
06-23 2549
前端拿到数据了但不能显示,控制台输出也正常,但再次调用时没数据
记录一下使用vue进行前后端交互时出现的问题
一杯清茶的博客
09-16 313
记录一下使用vue进行前后端交互时出现的问题 如果后端返回的是页面，比如render（），前端接收数据就要使用，比如tabeldata: {{ xxx | sate }} 如果后端返回的是数据，比如json数据等，前端在声明时只需要为空，比如tabledata: [] ...
VUE项目使用axios发送post跨域请求，返回数据失败问题
weixin_42966151的博客
11-16 5381
Access to XMLHttpRequest at 'http://xxxx' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
关于vue取值的问题
a1550290560的博客
06-29 2101
首先我们来看错误代码的截图 在这个下拉框这里，没有任何数据，但是控制台又返回了数据 我们来看看控制台的数据 我们再来看看错误的的代码部分 错误的原因是因为，在控制台里面，我的data下面，已经没有data了，所以截图上的错误就是在data下面在找data，但是我的下面已经有了，所以才出现了开始那情况。 如果data下面有个list，那么如果想获取数据就是data.list！ 如果data下面...
vue获取data中数组的value值_vue调用组件，组件回调给data中的数组赋值，报错Invalid prop type check failed for prop value. Expecte...
weixin_39547596的博客
01-14 334
报错信息：代码信息：调用一个tree组件，选择一些信息@treeCheck="treeCheck":isClearAllChecked=true:defaultProps="defaultProps">选择之后返回选中数据信息，并且在父组件中给data中的数组(type、typeName)赋值：data: function () {return {dataForm: {type: [],ty...
【vue 项目】调用后端返回的文件流接口报错Error，并进行文件导出
Aohanzzz的博客
11-28 2016
调用后端返回的文件流接口报错Error，并进行文件导出
解决：Vue获取后端传送的Map类型的数据，获取成功，无法调用！
热门推荐
一名准程序员
03-26 2万+
一个关于导航栏的坑！（自己基础薄弱~） 自己挖的一个大坑，关于后端往前端传值的坑！ 前后端交互没问题，数据正常交互。 突然！后端传送过来的一个 map集合，获取成功了，但是无法调用，数据就在眼前，想通过 v-for 渲染，就是调不出来。 经过大神解惑，map的原理是 K V ,映射关系，调用的时候是 map.key 问题重现： 后端传送过来的map数据是 这样的： 这尼玛就是一个对...
"empty": false 关于这个问题的解决
Harden3的博客
02-26 4882
这里的jsonObject返回结果是"empty": false，这是什么问题呢，来看看国外大佬怎么说： 下面是解决办法： 这个亲自测试了，可以解决。 他的意思就是不能直接创建json对象，而是得创建实体类，spring能将实体类转成json格式并返回。 spring使用jsonObject作为序列化器和反序列化器，但是如果你的对象直接是jsonObject了，spring反而不知道怎么去序列化...
vue通过识别后端报错信息，使前端自动返回登录页
网易游戏真辣鸡
08-30 949
前言 一般可能用在网页连接超时的情况 实现 工具 1.axios 2.vue-router 步骤 1.通过在main.js设置axios的拦截器，拦截所有的状态为false的信息（需要后端配合，标注错误状态） 2.对信息进行判断。如果符合判断内的特殊条件，就通过 window.location.href 的方式获取最后的路 由进行判断当前页面是否是登录页，是的话就不处理，不是就跳转到登录页 代码 //axios响应拦截器 axios.interceptors.response.use( response
unity3d(2021版)打包成webgl和前端vue交互
07-25
### 回答1： Unity3D是一款功能强大的游戏开发引擎，可以用于创建各种类型的游戏。2021版的Unity3D引入了许多新功能和改进，使得开发游戏变得更加容易和高效。 在Unity3D中，我们可以将游戏打包成WebGL格式，以便在Web浏览器上运行。要实现与前端Vue框架的交互，我们可以使用Unity3D提供的一些API和技术。 首先，我们可以使用Unity3D的WebRequest类或者使用UnityWebRequest来与服务器进行网络通信。通过发送HTTP请求和接收响应，我们可以与前端的Vue应用程序进行数据交换。例如，我们可以从Vue应用程序中向Unity3D发送请求，以获得某个游戏关卡的状态或者玩家的统计信息，然后Unity3D可以处理这些请求并返回相应的数据。 其次，Unity3D还提供了一种称为JavaScript与Unity3D交互的机制。通过在Unity3D的脚本中使用JavaScript代码，我们可以直接在Vue应用程序中调用Unity3D中的函数或方法。这种方式使得前端和Unity3D之间的通信更加方便和灵活。例如，我们可以在Vue应用程序中的某个按钮点击事件中调用Unity3D中的特定函数，以触发游戏中的相应操作或动画。 最后，为了实现实时的数据传输和通信，我们可以使用WebSocket技术。WebSocket允许双向通信，并且具有低延迟和高效性。我们可以在Vue应用程序中创建WebSocket客户端，然后在Unity3D中使用WebSocket库来创建WebSocket服务器，从而建立双向通信通道。通过WebSocket，我们可以实现实时的数据传输和事件触发，例如实时更新游戏角色的位置或者发送聊天消息。 总而言之，Unity3D 2021版可以通过各种技术和API实现与前端Vue应用程序的交互。通过网络通信、JavaScript与Unity交互和WebSocket技术，我们可以实现数据的传输和双向通信，从而创造出更加丰富和交互性强的游戏体验。 ### 回答2： Unity3D是一款功能强大的游戏开发引擎，它可以轻松地将游戏打包成WebGL，使其能够在Web浏览器中运行。而与前端Vue框架进行交互，则需要借助一些额外的工具和技术。 首先，我们可以使用Unity3D的WebGL模板来导出游戏项目。在Unity编辑器中，选择Build Settings面板，选择WebGL作为目标平台，并进行相应的设置和调整。然后点击Build按钮，Unity将自动生成WebGL版本的游戏文件。 接下来，我们需要将生成的WebGL文件嵌入到Vue项目中。可以在Vue的组件中使用HTML iframe元素来加载Unity Web Player插件，并指定WebGL游戏的URL地址。这样，Vue应用就能够在浏览器中展示Unity游戏。 为了实现Unity3D和Vue之间的交互，我们需要用到JavaScript的接口技术。首先，在Unity3D的代码中定义一些JavaScript函数，用于接收来自Vue的调用，并执行相应的游戏逻辑。然后，在Vue中使用JavaScript调用Unity的方式来与游戏进行交互，例如调用游戏中的特定功能或获取游戏的状态。 在Vue中，可以使用Vue插件或者自定义的JavaScript模块来封装与Unity3D的交互逻辑，以便在Vue组件中更方便地使用。这样，我们就可以实现Unity3D和Vue之间的双向通信，通过JavaScript接口在它们之间进行数据的传递和操作。 总结起来，使用Unity3D(2021版)打包成WebGL后，通过在Vue中嵌入WebGL文件，并结合JavaScript接口技术，我们可以实现Unity3D游戏与前端Vue的交互。这样的交互方式可以为游戏开发提供更丰富的前端体验和功能，并且使得开发人员能够有效地利用Unity3D和Vue的优势，为用户提供更好的游戏体验。 ### 回答3： Unity3D是一款功能强大的游戏开发引擎，2021版的Unity3D可以将游戏打包成WebGL格式，并与前端Vue进行交互。 首先，要将Unity3D项目打包成WebGL格式，我们需要在Unity编辑器中对项目进行相关设置。我们可以选择在“Build Settings”中选择WebGL平台，并设置导出的文件夹路径和其他相关参数。然后，我们点击“Build”按钮即可生成WebGL版本的游戏。 生成的WebGL版本的游戏可直接在Web浏览器中运行，并具有良好的跨平台性能。在与前端Vue进行交互的过程中，可以使用Unity提供的UnityInstance对象和前端的JavaScript代码进行通信。 在Vue中使用Unity3D的WebGL游戏，我们可以在Vue组件中引入游戏的HTML文件，并将其嵌入Vue模板中的某个位置。可以使用Vue的生命周期钩子函数，在组件挂载完毕后加载游戏，并在组件销毁前销毁游戏实例。 通过UnityInstance对象，我们可以通过调用其提供的函数和属性与Unity游戏进行交互。例如，我们可以通过调用UnityInstance.SendMessage()函数，向Unity发送消息，实现与Unity的双向通信。Unity也提供了一些常用的API，用于获取游戏状态、传递数据等操作。前端Vue可以根据需要，通过调用这些API实现与Unity游戏的交互。 总之，Unity3D(2021版)可将游戏打包成WebGL格式，并与前端Vue进行交互。通过适当的设置和API调用，我们可以轻松实现在Web浏览器中运行Unity游戏，并与前端实现双向通信。这为开发跨平台的游戏和应用程序提供了更多的可能性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值