解决vue组件渲染没更新数据问题

 更新时间:2023年02月09日 10:11:12   作者:CSNZのBlog  
本文主要介绍了解决vue组件渲染没更新数据问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

问题:

使用前端日期控件时 - 数据联动时数据绑定无效问题

现象:

选择A日期,想动态改变B日期数据,只有第一次选择时会动态改变B日期数据,第二次选择A日期时,B日期数据虽已改变,但是页面数据未改变

例如我要点击留样日期,销毁日期就得默认设置为留样日期之后的三个月,只有第一次点击,效果能正常显示,但是第二次点击,销毁日期就不会更新了…

原因

前端组件没有重新加载,一直保持旧数据

解决步骤

使用标志位让组件每次更改刷新一次

一、前端组件绑定点击事件

二、新增一个标识flag 默认为true ,即组件默认显示

三、要联动的前端组件增加标识判断 flag为true时显示,false时隐藏

四、在绑定的点击事件中刷新flag标识 这样子即让组件 隐藏又展示,该组件的数据便重新渲染了

到此这篇关于解决vue组件渲染没更新数据问题的文章就介绍到这了,更多相关vue组件渲染没更新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue3 openlayers加载瓦片地图并手动标记坐标点功能

    Vue3 openlayers加载瓦片地图并手动标记坐标点功能

    这篇文章主要介绍了 Vue3 openlayers加载瓦片地图并手动标记坐标点功能,我们这里用vue/cli创建,我用的node版本是18.12.1,本文结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2024-04-04
  • vue项目中导入swiper插件的方法

    vue项目中导入swiper插件的方法

    这篇文章主要介绍了vue项目中导入swiper插件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • 详解Vue+axios+Node+express实现文件上传(用户头像上传)

    详解Vue+axios+Node+express实现文件上传(用户头像上传)

    这篇文章主要介绍了详解Vue+axios+Node+express实现文件上传(用户头像上传),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • vue通过点击事件读取音频文件的方法

    vue通过点击事件读取音频文件的方法

    最近做项目遇到这样的一个需求,通过select元素来选择音频文件的名称,点击按钮可以进行试听。接下来通过本文给大家介绍vue项目中通过点击事件读取音频文件的方法,需要的朋友可以参考下
    2018-05-05
  • vue项目配置sass及引入外部scss文件方式

    vue项目配置sass及引入外部scss文件方式

    这篇文章主要介绍了vue项目配置sass及引入外部scss文件方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 使用Vue调取接口,并渲染数据的示例代码

    使用Vue调取接口,并渲染数据的示例代码

    今天小编就为大家分享一篇使用Vue调取接口,并渲染数据的示例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Vue中ref和$refs的介绍以及使用方法示例

    Vue中ref和$refs的介绍以及使用方法示例

    这篇文章主要给大家介绍了关于Vue中ref和$refs使用方法的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • Vue3+Vue Router实现动态路由导航的示例代码

    Vue3+Vue Router实现动态路由导航的示例代码

    随着单页面应用程序(SPA)的日益流行,前端开发逐渐向复杂且交互性强的方向发展,在这个过程中,Vue.js及其生态圈的工具(如Vue Router)为我们提供了强大的支持,本文将介绍如何在Vue 3中使用Vue Router实现动态路由导航,需要的朋友可以参考下
    2024-08-08
  • Vue中mixins的使用方法以及实际项目应用指南

    Vue中mixins的使用方法以及实际项目应用指南

    vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用,下面这篇文章主要给大家介绍了关于Vue中mixins的使用方法以及实际项目应用指南,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • Vue3中v-model语法糖的三种写法详解

    Vue3中v-model语法糖的三种写法详解

    这篇文章主要为大家详细介绍了Vue3中v-model语法糖的三种写法,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以跟随小编一起学习一下
    2024-01-01

最新评论