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

Question

根据条件渲染table内容

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

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

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

打印报undefined

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

Answer 1

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

顺便把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>

Answer 2

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

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