Vue3弹窗打开时获取数据：使用watch和axios实现实时更新

在Vue 3中，你可以使用watch函数来监听弹窗的打开状态，并在每次弹窗打开时重新获取数据。然后，通过axios发送请求并将获取到的数据赋值给record。

下面是一个示例代码，演示了如何实现这个功能：

<template>
  <div>
    <button @click="openPopup">打开弹窗</button>
    <div v-if="isPopupOpen">
      <!-- 弹窗内容 -->
    </div>
  </div>
</template>

<script>
import { reactive, watch } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const record = reactive({});

    // 弹窗的打开状态
    const isPopupOpen = reactive(false);

    // 监听弹窗打开状态的变化
    watch(isPopupOpen, (newValue) => {
      if (newValue) {
        // 发送请求获取数据
        axios.get('/api/data') // 替换为你的后端接口地址
          .then((response) => {
            record.data = response.data;
          })
          .catch((error) => {
            console.error('Failed to fetch data:', error);
          });
      }
    });

    // 打开弹窗
    const openPopup = () => {
      isPopupOpen.value = true;
    };

    return {
      record,
      isPopupOpen,
      openPopup,
    };
  },
};
</script>

在上面的代码中，我们使用watch函数来监听isPopupOpen的变化。当isPopupOpen的值从false变为true时，我们发送axios请求来获取数据，并将获取到的数据赋值给record。你可以根据实际需求调整请求的URL和数据的赋值方式。

请注意，上述代码是一个简化的示例，仅用于演示概念。你可能需要根据你的具体需求进行修改和调整。