在vue中使用@antv/g2画图的组件在数据变化或重新加载后图像不能重新渲染的一种v-if解决方法

最新推荐文章于 2023-02-03 16:08:50 发布
最新推荐文章于 2023-02-03 16:08:50 发布
阅读量1.4k 收藏 1
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52651584/article/details/127928578
版权

  例如在vue中安装@antv/g2然后使用其制作条形图饼状图柱状图组件，引入并渲染后由于数据改变或者通过Axios请求了新数据。

  如果图像已经渲染过可能出现通过prop传递的数据不会改变图像，或者渲染出两个图像的情况。

  这时可以为相应的组件添加v-if属性

v-if = "show"

更改数据前将将其赋值为false

v-if = false

  更改数据后将其赋值为true，使其重新渲染

v-if = true
哒哒滴答答
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
前端面试题---2022
m0_54861649的博客
03-02 329
*集大成之面试题，我们不做面试题的创作者，只做面试题的搬运工（侵必删） 〇 理论 一个完整的URL 解析过程 1 用户输入 URL 地址。 2 对 URL 地址进行 DNS 域名解获得IP地址。 3 建立 TCP 连接（三次握手）。 4 浏览器向 web 服务器发送一个 HTTP 请求报文。 5 服务器返回 HTTP 响应报文给客户端。 6 关闭 TCP 连接（四次挥手）。 7 浏览器解析文档资源并渲染页面。 解析过程：浏览器解析的资源（html，svg,Xhtml等），解析完成后都会生成一个完整的DOM
G6使用遇到的问题
風缘的博客
04-19 2979
1.更新数据视图样式不更新 在new G6.Graph时有设置fitView: true， 但是使用graph.changeData更新数据，数据更新了但是fitView没生效，使用graph.refresh()，graph.paint()设置无效（哪位大神知道怎么做可以评论给我留言）。所以只能先销毁在重新渲染 if (this.graph){ //销毁方法 this.graph.destroy(); } //重新实例化 this.initG6()
G6数据修改后，数据不能正常刷新解决方法
qq_41183828的博客
10-14 3163
G6数据修改后，数据不能正常刷新解决方法 之前用官方文档的方法试了很多遍没有用，才出此下册， 我这里是把之前实例化的组件销毁后，重新实例化 refresh: function() { /* if (this.treeData) { this.treeGraph.data(this.treeData); } this.treeGraph.render(); this.treeGraph.fitView(); this.
蚂蚁金服的AntvG2的日常使用和报错情况（简称坑）
07-28 5597
先说报错： 1、antv 报错Chart.data is not a function 解决：这个是因为版本的问题，在不指定版本的情况下，由于npm安装的antv的版本为3.x.x, 我们可以使用v3中的source代替data方法 同时我们也可以使用v4版本：npm install @antv/g2@4.0.7 2、 vue中使用 import { Chart } from '@antv/g2'; const data = [ { feature: 'Battery', value: 0.22, ph
vue3实现局部组件重新渲染
热门推荐
qq_43393995的博客
10-14 1万+
在Vue2中我们除了使用v-if 指令让局部dom的重新渲染，也可以新建一个空白组件，需要刷新局部页面时跳转至这个空白组件页面，然后在空白组件内的beforeRouteEnter 守卫中又跳转回原来的页面。在全局状态中定义一个isRouterAlive 标识刷新状态，根据isRouterAlive 变化来重新渲染。想要实现页面的局部刷新，我们只需要实现局部组件（dom）的重新渲染。如下图所示，如何在Vue3.X中实现点击刷新按钮实现红框范围内的dom重新加载，并展示对应的加载状态。第一步：定义状态标识。
【Antv g6】react hook下的useEffect执行初始化渲染 图表渲染了2次的原因及解决办法
hzxOnlineOk的博客
09-21 2505
如下图所示，的树形图渲染了2次 由于图表需要获取数据，因此会将初始化代码放入中进行更新，这造成了重复的初始化新的图表对象，并创建画布进行将图表对象设置为全局变量，定义于函数式组件之外（必须这样做），接着在周期函数内最上方写上以下这段代码
在vue项目中引用Antv G2,以饼图为例讲解
01-18
npm install @antv/g2 –save template内容： <div id=pieChart></div> </template> js部分： ​//引入G2组件 import G2 from @antv/g2; ​ export default { name:, //数据部分 data(){ return{ source...
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
总结来说，当在 `el-tab-pane` 中使用 `v-show` 或 `v-if` 遇到问题时，可以考虑以下几点： 1. 理解 `v-show` 和 `v-if` 的工作原理及其与组件内部实现的交互。 2. 使用 `v-if` 代替 `v-show`，尽管这可能会导致性能...
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
10-17
vue中v-if 和v-else-if在页面加载的时候，不满足条件的标签会加载然后再消失掉，如果要解决这个问题，下面小编给大家带来了实例代码，需要的朋友参考下吧
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
10-17
例如，当使用`v-if`或`v-show`进行条件渲染，或者使用插值表达式显示动态数据时，如果不做处理，这些内容在JS执行前会短暂地显示在页面上。 为了解决这个问题，我们可以采取以下策略： 1. 隐藏待编译的元素：在...
在Vue中使用antv的示例代码
10-15
第一种方法适用于全局使用AntV/G2的情况，而第二种方法则更适用于仅在特定组件中使用的场景，可以减少项目的体积。无论选择哪种方式，AntV/G2都能帮助你轻松创建出美观的数据图表，提高应用的用户体验。
真机调试时发现v-if没有重新渲染
hao_sir
05-24 701
解决方法： 使用key标识不同的div(或组件)，同时使用v-if, v-else-if,v-else指令 如果只使用key标识，不使用v-if,v-else等指令组合而是单单使用 v-if会失败,即不重新渲染。 正确的示例如下： <div class="content" :key="111" v-if="page == 1"> </div> <div class="content" :key="222" v-else-if="page==2"> </div&g
26.Vue3：条件渲染
m0_63953077的博客
10-08 239
Vue3：条件渲染
Vue中 数据改变但未渲染的问题，页面中并没有自动更新，但是在控制台可以打印出来，常见解决方法
liumimi973的博客
02-03 8668
打印出来值，赋值未渲染
Vue中强制组件重新渲染
Boboy
01-16 1413
Vue中强制组件重新渲染
antv G2使用问题
weixin_43887531的博客
05-07 2603
当加载容器一开始不显示时 无法加载chart图 scale缩放 会造成G2 显示问题 （划入的提示信息 缩放50%时 滑到第二个柱状图还是第一个提示信息 ！！echart 不会有此问题） 辅助元素的使用 很方便 可以做加文字 div图片等 自定义 formatter等 很方便 （很烦 能做基本所有的样式需求 不如echart 规定好的用起来简单 方便） 为完美解决 问题 散点图 X轴Y轴不...
解决vue使用v-for渲染列表时用v-if控制标签显示隐藏没效果 解决页面不会重新渲染问题
qq_34200636的博客
03-01 4745
场景：当文本超过三行时显示更多按钮，单击“更多”后，文本全部显示，“更多”隐藏 解决： 在“更多”按钮的事件里加上this.$forceUpdate() 强制刷新，此方法会触发update生命周期 ...
G2 实时刷新 流量监控图
weixin_30414305的博客
09-12 629
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,height=device-height"> &l...
vue2使用@antv/l7-maps 地图高度为0
最新发布
08-07
在Vue2使用@antv/l7-maps时，如果地图高度为0，可以检查以下几个可能的原因和解决方法： 1. 检查代码：请确保你的代码中指定了正确的地图高度。可以在组件的模板中设置地图容器的高度，比如： ``` <template> <div id="mapContainer" style="height: 500px;"></div> </template> ``` 确保给地图容器设置了合适的高度，以使地图显示正常。 2. 检查CSS样式：有时候全局的CSS样式可能会影响到地图的高度。可以通过浏览器的开发者工具（如Chrome的开发者工具）检查CSS样式，并确保没有其他样式将地图容器的高度设置为0。 3. 检查依赖和版本：确保你已经正确安装了@antv/l7和@antv/l7-maps这两个依赖，并且版本兼容。可以使用npm或yarn来更新或重新安装它们。 4. 检查依赖项是否加载成功：在使用@antv/l7-maps之前，需要确保相关的依赖项已经加载成功。可以使用浏览器的控制台查看是否有报错或警告提示，可能是因为某个依赖项加载失败导致地图显示异常。 如果以上方法仍无法解决地图高度为0的问题，建议查阅@antv/l7-maps的官方文档或在相关的技术社区进行提问，以获得更具体的帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

哒哒滴答答

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值