b-code-editor通过$nextTick方法清除数据

最新推荐文章于 2024-06-10 21:57:03 发布
最新推荐文章于 2024-06-10 21:57:03 发布
阅读量85 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hmbbpdx/article/details/134297086
版权

点击修改按钮json数据正常显示出来

但是点击新增我发现数据没有被清空

我在这做清除操作竟然没有作用

我又做了一个按钮触发

this.$refs['jsonEditor'].getEditor().setValue('')

我发现有用了

奇怪了，我怀疑是dom节点没有创建，导致清除不成功

所有我使用$nextTick方法

这个回调函数会在下一次DOM更新循环结束后被执行。
在上面的代码中，我将设置编辑器值的逻辑放在了this.$nextTick的回调函数中。这样可以确保在下一次DOM更新循环结束后再尝试设置编辑器的值，从而避免在组件mounted时就立即设置值导致的问题。

this.$nextTick(() => {
  this.$refs['jsonEditor'].getEditor().setValue('')
})
hmbbpdx
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
code-editor:轻量级的代码编辑器
04-06
代码编辑器 一个基于Web的简约代码编辑器
code-editor:一个简单的代码编辑器，用于快速编辑
08-04
代码编辑器 请在提供反馈和问题对于我们的功能/变更日志，请访问 最新版本更新： 我们使用了 Firebase 的 FirePad 代码的一部分来添加协作。 支持的版本 以下是代码编辑器支持的版本 版本 支持的 6.0.x :check_mark_button: 3.1.x :check_mark_button: 2.1.x :cross_mark: 2.0.x :cross_mark: 1.0.x :cross_mark: 报告漏洞 我们目前不对某些漏洞负责。 如果有，您可以提出问题或访问
Bin Code Editor格式化JSON编辑器
weixin_45917647的博客
08-04 7959
Bin Code Editor格式化JSON编辑器
b-code-editor JSON编辑器的样式问题
weixin_73216040的博客
02-28 611
首先，给b-code-editor打上标签，然后在created阶段或者mounted阶段执行formatCode方法。这种情况下，我们要用到其。
使用bin-code-editor格式化JSON字符串并在页面中展示
h2790832998的博客
12-28 907
在package.json中加入 "bin-code-editor": "^0.9.0",然后npm i 下载依赖包或者直接npm i bin-code-editor。把上面这种格式的数据像这个样子展示出来。用法：在dialog弹窗中放置这个组件。在main.js中写入。
Vue：Bin Code Editor格式化JSON编辑器
席木木的博客
06-01 349
Vue项目中，Bin Code Editor格式化JSON编辑器的使用与踩坑记录。
vue中$nextTick的用法讲解
10-17
今天小编就为大家分享一篇关于vue中$nextTick的用法讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
详解vue中$nextTick和$forceUpdate的用法
12-13
this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行,在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。 应用场景： 1、 在Vue...
Vue中this.$nextTick的作用及用法
11-21
vue将遍历data对象中所有的属性，并通过 Object.defineProperty 把这些属性全部转为 getter/setter；但是我们是没有办法看到 getter/setter的，但是在内部它们让 Vue 能够追踪依赖，在属性被访问和修改时通知变更。 ...
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
01-19
一个是`Vue.nextTick(callback)`，当数据发生变化，更新后执行回调。 另一个是`Vue.$nextTick(callback)`，当dom发生变化，更新后执行的回调。 栗子： ... <li v-for=item>{{item}} ... new Vue({ el:'#demo'...
CodeEditor-开源
05-14
适用于多种语言的代码编辑器，例如mips，c＃，c ++，xml，html，...
online-code-editor:开源在线代码编辑器-Source code editor
03-24
在线代码编辑器 开源在线代码编辑器
Code_Editor.js:简短的
04-23
# Brief : ## This is a personal code editor developed for myself to write and execute JavaScript code on localhost. • This is developed for learning purpose for improving my JS Skills. • Users can be able to write and execute their JavaScript code and can also be able to see the output. • It supports only JavaScript for now, I am working on this for other languages as well.
vue中解决b-code-editor没法调整高度的问题
qq_37401609的博客
04-25 350
【代码】vue中解决b-code-editor没法调整高度的问题。
vue JsonEditor 编辑器
m0_60522381的博客
09-14 1103
JsonEditor官网 做后台管理系统需要展示可视化的Json，这样方便录入人员读取。如图所示⬇️ 安装步骤 第一步： npm i bin-code-editor -S # or yarn add bin-code-editor 第二步：在main.js中引入 import CodeEditor from 'bin-code-editor'; Vue.use(CodeEditor); 第三步：在所需的.vue文件中 <template> <div&...
vue-json-editor json编辑器
热门推荐
Jack, what else can you do besides holding your little darling?
02-19 2万+
vue-json-editor json编辑器
BRAFT EDITOR富文本编辑器
weixin_30508241的博客
11-07 294
https://braft.margox.cn/demos/basic 官方文档 import React from 'react' import Uploading from '../Upload/index' // import FuWenBen from '../fuwenben/index' import { Form, Input, Button, Auto...
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 406
在vue.config.js中配置关闭Uncaught runtime errors显示。
JS中一个dom元素能绑定多少事件
最新发布
ggq53219的博客
06-10 570
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
uni-app的this.$nextTick怎么使用
08-16
在uni-app中，this.$nextTick是用于在DOM更新后执行回调函数的方法。它的使用方式如下： 1. 在Vue组件中，可以在需要延迟执行的代码块中使用this.$nextTick()。 ```vue <template> <div> <p>{{ message }}</p> <button @click="changeMessage">Change Message</button> </div> </template> <script> export default { data() { return { message: 'Hello, World!' }; }, methods: { changeMessage() { this.message = 'New Message'; this.$nextTick(() => { // DOM已经更新 console.log('DOM updated'); }); } } }; </script> ``` 在上面的例子中，当点击按钮时，会改变message的值，并在DOM更新后执行回调函数。 2. 在非Vue组件中，可以使用this.$nextTick()方法。 ```javascript export default { data() { return { message: 'Hello, World!' }; }, mounted() { this.message = 'New Message'; this.$nextTick(() => { // DOM已经更新 console.log('DOM updated'); }); } }; ``` 在非Vue组件中，可以在mounted生命周期钩子函数中使用this.$nextTick()来确保DOM已经更新后再执行回调函数。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值