Vue3组合式API中如何将Axios响应传递至模板显示

你的代码存在两个核心问题，导致responseData无法在模板中正常显示：

• responseData和showResponseData未用ref声明为响应式变量，变量更新后Vue无法触发视图更新
• 这两个变量未在setup的返回对象中暴露，模板无法访问到它们

无需使用生命周期钩子，按以下步骤修改即可解决：

1. 将变量声明为响应式
   把原代码中普通变量替换为ref响应式变量：

const responseData = ref('')
const showResponseData = ref(false)

2. 暴露变量给模板
   在setup的返回对象中添加这两个变量，确保模板能访问：

return{dropzoneFile, drop, selectedFile, sendFile, responseData, showResponseData}

3. 正确更新响应式变量
   在Axios回调中通过.value修改ref变量的值，并开启显示开关：

.then(response => {
  responseData.value = response.data
  showResponseData.value = true
  console.log(responseData.value);
})

修改后的完整代码 #

<template>
  <div class="home">
    <h1>BPMN Lint Analyzer</h1>
    <!-- Get File from DropZone -->
    <DropZone @drop.prevent="drop" @change="selectedFile"/>
    <span class="file-info">File:{{dropzoneFile.name}}</span>
    <button @click="sendFile" >Upload File</button>
    <!-- Display Response Data (Fixed) -->
    <div v-if="showResponseData">
      <p>Testing: {{responseData}}</p>
    </div>
  </div>
</template>

<script>
import DropZone from '@/components/DropZone.vue'
import {ref} from "vue"
import axios from 'axios'

export default {
  name: 'HomeView',
  components: {
    DropZone
  },
  setup(){
    let dropzoneFile = ref("")

    // 定义响应式的返回数据和显示开关
    const responseData = ref('')
    const showResponseData = ref(false)

    //Methods
    const drop = (e) => {
      dropzoneFile.value = e.dataTransfer.files[0]
    }
    const selectedFile = () => {
      dropzoneFile.value = document.querySelector('.dropzoneFile').files[0]
    }

    //API Call
    const sendFile = () => {
      
      let formData = new FormData()
      formData.append('file', dropzoneFile.value)

      axios.post('http://localhost:3000/fileupload', formData,{
        headers: {
          'Content-Type':'multipart/form-data'
        }
      }).catch(error => {
        console.log(error)
        showResponseData.value = false // 请求失败时隐藏显示区域
      }).then(response => {
        if (response) { // 确保响应存在再赋值
          responseData.value = response.data
          showResponseData.value = true
          console.log(responseData.value);
        }
      })
    }
    return{dropzoneFile, drop, selectedFile, sendFile, responseData, showResponseData}
  }
}
</script>

额外优化：在请求失败的回调中关闭显示开关，避免展示旧数据；添加响应存在的判断，提升代码健壮性。

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