关于输入框显示[object Promise]的问题

最新推荐文章于 2023-12-20 10:16:54 发布
最新推荐文章于 2023-12-20 10:16:54 发布
阅读量2.5w 收藏 3
点赞数 7
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dujyong/article/details/103482989
版权

解决输入框显示[object Promise]的问题

在项目中遇到了一个摸不着头脑的问题，研究了很久才解决，百度上没有看到有什么记录，就将其记录一下，
项目中的输入框一输入东西就会变为[object Promise]，并且还删不掉，上图：
在这里插入图片描述
经过一步步排查，最终发现是双向数据绑定时出现了问题，：
在这里插入图片描述
赋值变为了async异步函数，返回的是promise对象导致页面渲染出现问题，将async删除，问题解决：
在这里插入图片描述

你头发乱了喔_
关注
  • 7
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue3 - 解决报错 Uncaught (in promise) SyntaxError: “[object Object]“ is not valid JSON（json.parse()无法解析）
王佳斌
05-11 3035
vue.js，vue3，nuxt，JavaScript，uniapp，json字符串，json对象，json报错，JSON.parse()，vue3报错，vue3转换json对象报错，Uncaught (in promise) SyntaxError: “[object Object]“ is not valid JSON at JSON.parse(
JS异步编程——深入理解Promise
zhengjingID的博客
06-07 948
解决异步编程回调地狱问题的解决方案Promise、Generator和async/await已被ES6收录，发布/订阅和deferred对象是社区中的解决方案。本篇文章重在深入理解Promise，手写一个Promise方法。
async await异步
陈开心的博客
10-31 1970
介绍Promise 既然有了promise 为什么还要有async await ？ 因为promise 不是完美的异步解决方案，而 async await 的写法看起来更加简单且容易理解。 Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。 Promise 对象是由关键字 new 及其 构造函数 来创建的。构造函数会 把一个叫“处理器函数”（executor fu...
JavaScript如何解决返回[object Promise]
weixin_42576804的博客
02-16 8924
当使用JavaScript中的Promise时，当您尝试访问Promise的值时，您可能会看到返回值为[object Promise]的情况。这是因为Promise是一种异步操作，它不能立即返回结果，而是需要等待操作完成后返回结果。 要访问Promise的值，您需要使用Promise的then()方法，该方法接受一个回调函数作为参数，该回调函数在Promise被解析(resolved)时被调用。例...
【vue js】网页显示 [object Promise] 错误
weixin_64051447的博客
03-30 4022
首先，在声明处，初始化一个变量，用于存储数值。最后，在显示部分(
Promise详解
whl0071的专栏
08-13 1919
es6 Promise详解
es6--promise
小白小白从不日别的博客
06-08 831
三、promise的构造函数方法 promise.resolve()方法和promise.reject()方法 promise.all()方法 promise.race()方法 promise.allSettled()方法 四、promise的注意事项和应用 promise的注意事项 promise的应用 ...
前端面试大厂手写源码系列（上）
01-08
这两个函数常用于优化性能，尤其是在处理高频事件时，如输入框的搜索请求或窗口大小调整。 防抖函数（debounce）确保在一段时间内没有新的触发，才会执行一次函数。如果在这段时间内再次触发，计时器会重置。以下是...
前端面试题收集整理ಠᴗಠ 查漏补缺刷一波
01-08
- Vue Router的模式选择、CSS3圆头像排序、哈希冲突解决、DOM列表转数组、文本与输入框两端对齐等，这些都是前端开发中的常见问题，涉及到路由管理、CSS布局、数据处理、DOM操作等多个方面。 了解并掌握这些知识点...
CodeSignal:CodeSignal测试
03-07
这个“CodeSignal:CodeSignal测试”很可能指的是一个关于使用CodeSignal进行编程技能评估或面试的资源包。由于标签是"JavaScript"，我们可以推测这个压缩包可能包含与JavaScript相关的练习题目、解决方案或者面试...
前端大厂最新面试题-2020快手前端社招面经.docx
06-06
该方法将返回一个新的 Promise 对象，仅当所有 Promise 对象都 resolved 时，新的 Promise 对象才会 resolved。 下面是一个简单的实现： ```javascript Promise.all = function (promises) { return new Promise...
Magic_Eight_Ball
03-18
1. 创建HTML结构：包括输入框让用户输入问题，以及显示答案的区域。 2. 编写JavaScript逻辑： - 监听输入框的事件，如提交按钮的点击。 - 捕获用户输入，确保其非空。 - 使用Math.random()生成0到预设答案数量...
Object、Promise、HTML5简单面试汇总
m0_54429336的博客
08-04 188
Object、Promise、HTML5简单面试汇总
JS编写应用并调用Python。OS: Can‘t find Google Chrome installation报错解决。调用eel库时使用Edge浏览器及解决网页object Promise问题。
DearPhotographer的博客
08-04 381
【1】调用eel库时如何把使用的浏览器改为Edge？ 【2】只使用Edge浏览器时如何解决eel库的OSError: Can't find Google Chrome/Chromium installation报错？ 【3】JavaScript使用eel调用Python函数时如何解决返回是[object Promise]？ 【4】结语：实现了“使用前端语言JavaScript调用Python函数来实现需求”的操作。
ES6--》一文搞懂JS中的Promise
ztK63LrD的博客
09-29 1113
但是前一个then()方法中的回调函数中又可能返回一个Promise实例，这时候后面一个then()方法中的回调函数会等前一个Promise实例状态发生变化才会调用。该方法同样是将多个 Promise 实例包装成一个新的 Promsie 实例，该方法与 Promise.all()方法一样，区别是该方法中只要参数之中有一个实例率先改变状态，该方法的实例状态跟着改变，那个率先改变的 Promise 实例的返回值就传递给该方法实例的回调函数。该方法用来确定一组异步是否都结束(不管成功或失败)。
小程序bindinput获取当前输入的字符，以及[object promise]的问题解决
有一种信仰叫海阔天空
08-20 7008
小程序获取当前输入的字符使用bindinput事件，没输入一个字符然后调用js写的方法，获取输入的信息，然后将输入的信息放到data定义的变量中 当输入的字符出现object promise的时候，是因为定义的方法使用了async,所以才会出现此情况。使用的时候获取实时的数据，千万别用async,直接是 bindTextAreaBlur(e){...}。即可解决此异常 ...
vscode保存后object promise 怎么解决
最新发布
qq_42870544的博客
12-20 888
将vetur插件更新到最新版本之后，用vscode自动保存代码，会将<script>标签内的内容折叠成object promise。解决办法：禁用vetur插件，然后重启编辑器即可。
Vue+ElementUI+SpringCloud项目，使用el-badge报“object Promise”问题
weixin_44773906的博客
05-21 1220
Vue+ElementUI+SpringCloud项目，使用el-badge报“object Promise”问题一、问题截图二、原因分析三、个人解决办法 一、问题截图 二、原因分析 用异步方式获取数据，再加上页面是实时获取数据的，导致异步函数的数据双向绑定出现问题。 三、个人解决办法 避免使用异步方法。 在后端的API接口返回（return）数据之前（如xxxxSericeImpl实现类中），将自己查到的数据塞进去，前端再通过scope.row.xxxx的方式，将值传给el-badge的value。
unity 输入框显示表情包
08-16
在Unity中，要实现输入框显示表情包，可以按照以下步骤进行： 1. 导入表情包素材：首先，需要准备好表情包的图片素材。将这些图片素材导入到Unity项目中，并确保它们被正确地放置在Unity资源文件夹中。 2. 创建输入框：在Unity的UI界面中，可以通过选择Canvas对象，然后在Inspector窗口中点击“Create”按钮来创建输入框。可以调整输入框的大小、位置和样式，以适应表情包的显示需求。 3. 创建表情包面板：在输入框下方或旁边，可以创建一个面板来显示表情包。先创建一个空的UI面板，并调整其大小和位置，使其与输入框对齐。 4. 显示表情包：在面板中，可以创建多个Image组件来显示不同的表情包。将每个表情包的图片素材分配给对应的Image组件，可以通过拖拽图片素材到Image组件的Sprite属性上来完成。 5. 配置输入框逻辑：通过编写脚本来实现输入框的功能。例如，当用户在输入框中输入特定的词语或触发特定的事件时，根据预先定义的逻辑，切换表情包面板的显示。可以使用Unity提供的EventSystem来监听输入事件，并根据输入内容做出相应的处理。 6. 调整表情包显示效果：可以根据需要，调整表情包的动画效果或交互方式。例如，可以为表情包添加按钮组件，使用户能够点击表情包来实现更多操作，比如发送表情。 7. 测试和优化：在完成上述步骤后，需要对输入框和表情包显示效果进行测试，并根据需求进行优化。可以通过模拟用户的输入操作来测试输入框的功能，并确保表情包的显示正确、流畅。 通过以上步骤，可以在Unity中实现显示表情包的输入框，并根据需求进行进一步的扩展和优化。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值