如何解决Vue3模态框中GET请求方法无法正常工作的问题

模态框本身不存在无法调用GET请求的限制，你拿不到数据是代码里3个明确错误导致的：

1. 语法错误：DetailsModal.vue的请求拼接id时写了$this.detailID，Vue上下文不存在$this变量，正确的实例引用为this，这里会直接抛出引用错误，导致请求根本没有发送
2. 方法未定义：请求成功的回调里调用了this.getData()，但组件的methods配置中根本没有声明getData方法，就算请求发送成功也会在这里抛错中断
3. 传参隐患：列表页的详情按钮绑定参数写的是entries.id，如果按钮是在v-for遍历条目列表的循环中渲染，这里应该传入循环单项的id，否则会拿到错误的id值甚至undefined
   另外你现在把获取详情的逻辑绑定在手动点击"Get Details"按钮上，不符合常规交互逻辑，正常应该是打开模态框自动拉取对应id的详情，需要补对应的触发逻辑。

1. 修复列表页传参问题 #

如果详情按钮是在列表循环中渲染，确保传入的是当前循环条目的id，示例：

<!-- 列表循环部分，注意v-for的单项变量名和传给方法的参数对应 -->
<div v-for="entry in entryList" :key="entry.id">
  <!-- 其余列表展示内容 -->
  <button class="my-button-style details-button" 
  @click="displayDetailsModal(entry.id)">Details</button>
</div>

列表页其余逻辑不用调整，保持现有selectedDetailsID传参、v-show控制显隐的写法即可。

2. 重写DetailsModal.vue的逻辑 #

修正语法错误，补全详情数据存储、加载状态、自动拉取逻辑，修正后完整代码：

<template>
<div class="modal-overlay" @click="$emit('close-modal')">
  <div class="modal" @click.stop>
    <p>当前条目ID：{{detailID}}</p>
    <!-- 详情内容渲染区 -->
    <div v-if="detailData" class="detail-content">
      <!-- 以下字段根据你接口实际返回的结构调整即可 -->
      <p>条目名称：{{detailData.name}}</p>
      <p>创建时间：{{detailData.createdAt}}</p>
      <p>条目描述：{{detailData.description}}</p>
    </div>
    <p v-if="loading">详情加载中...</p>
    <p v-if="errorMsg" class="error-tip">{{errorMsg}}</p>

    <button @click="getDetail()">重新加载详情</button>
    <button @click="$emit('close-modal')">关闭</button>
  </div>
  <div class="close" @click="$emit('close-modal')">
    <img class="close-img" src="../assets/close.jpg" alt="关闭模态框" />
  </div>
</div>
</template>

<script>
import axios from "axios"
export default {
  props: ["detailID"],
  data() {
    return {
      detailData: null,
      loading: false,
      errorMsg: ''
    }
  },
  watch: {
    // 监听传入的条目id，id变化时自动拉取详情，无需手动点击按钮
    detailID(newId) {
      if(newId) this.getDetail()
    }
  },
  methods: {
    reloadPage() {
      window.location.reload();
    },
    async getDetail(){
      this.loading = true
      this.errorMsg = ''
      this.detailData = null
      try {
        // 修正之前的$this语法错误，用this引用组件实例
        const res = await axios.get(`https://testapi.io/api/something/resource/details/${this.detailID}`)
        this.detailData = res.data
      } catch (err) {
        this.errorMsg = '详情获取失败，请稍后重试'
        console.error(err)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

如果你不想用watch监听id变化，也可以把列表页控制模态框的v-show="showDetailsModal"改成v-if="showDetailsModal"，v-if会在模态框显示时才重新挂载组件，这时候可以把getDetail()调用放到组件的mounted生命周期里，效果和watch一致。

内容的提问来源于stack exchange，提问作者gogogadget132