根据条件渲染表格内容并触发弹窗，处理弹窗显示与数据加载顺序不一致的错误？

Question

根据条件渲染table内容

当点击单元格内容触发showImgDialog(row)这个方法时

跳出弹窗，并且弹窗内容嵌套表格

现在报错，imageTable组件接受不到传过去的值

打印报undefined

初步推断是因为程序自上而下执行，一开始先设置弹窗显示dialogImgVisible = true，再去获取数据赋值，所以导致弹窗了但数据还没给到。后来改变执行顺序无效，再后来对弹窗出现加了个延时器依然无效。

Answer 1

1、imageTableData有没有在组件内声明，没声明的话是不被监听的
2、imageTableData初始值是undefined，所以组件初始化时打印是undefined，后面imageTableData更新不会让组件重新初始化，此时你应该在组件内监听imageTableData或者用update钩子看imageTableData有没有变化。

其他一些无关槽点：
1、组件内使用数据不需要使用this，虽然写了好像也能获取到（具体忘了）
2、setTimeout第一个参数可以是函数，可以是字符串，你传了一个语句过去，相当于运行到这句的时候，先进行visible的赋值，然后把赋值结果true传给定时器

Answer 2

感觉没毛病，你先把无关的代码都删掉，参照我这个示例，在你的项目里面跑一下。

顺便把setTimeout改成下面的，你图上的立即执行了

setTimeout(() => {
    this.dialogImgVisible = true;
}, 3000)

https://7khw6g.csb.app/

<template>
  <div id="app">
    <button @click="onOpen(3)">click</button>
    visible{{ visible }}
    <button @click="visible = false">reset</button>
    data{{ data }}
  </div>
</template>

<script>
const delay = () =>
  new Promise((resolve) => {
    setTimeout(resolve, 1000);
  });

export default {
  name: "App",
  data() {
    return {
      data: [],
      visible: false,
    };
  },
  methods: {
    async onOpen(value) {
      await delay();
      this.data = [1, 2, 3];
      this.visible = true;
    },
  },
};
</script>