Dialog组件不刷新的问题

最新推荐文章于 2024-07-30 03:21:42 发布

LAHM8963

最新推荐文章于 2024-07-30 03:21:42 发布

阅读量1.6k

点赞数

分类专栏： vue 文章标签： elementui vue.js webview

本文链接：https://blog.csdn.net/LAHM8963/article/details/122306182

版权

在Vue.js项目中使用ElementUI的Dialog组件时遇到点击详情后，弹窗显示的历史数据未更新的问题。通过在子组件中添加watch监听设备名称变化并执行逻辑函数，但当再次点击相同设备详情时，数据不再重新加载。为解决这个问题，改为同时监听Dialog的visible状态和设备名称变化，并利用一个临时变量存储设备名称，在弹窗打开时获取新设备名称并执行逻辑，成功实现了数据的刷新。

摘要由CSDN通过智能技术生成

项目需求：

点击【详情】，弹窗显示相应的历史数据

父级：

 <!-- 详情弹窗 -->
<dialog-detail :dialog-detail-visible.sync="dialogDetailVisible" :dialog-name="dialogName" />

子级：

<template>
  <el-dialog title="数据详情" :visible.sync="dialogDetailVisible" :close-on-click-modal="false" :before-close="dialogClose">
    <div class="top">
      <p class="title">
        {
  { dialogName }}
      </p>
    </div>
    <div id="dataChart" />
    <div slot="footer" class="dialog-footer" />
  </el-dialog>
</template>
<script>
export default {
  props: {
    dialogDetailVis