Vue3 Composition API赋值后ref变量在请求中为空的问题

你定义的url是静态常量，在组件初始化阶段就完成了计算——此时fechaColaEmails.value还是空字符串。后续哪怕更新了fechaColaEmails的value，这个url变量的内容也不会自动刷新，所以请求URL里的参数始终是空的。

解决方案1：动态生成URL（推荐简单场景） #

直接在请求函数内实时拼接最新的fechaColaEmails.value，确保每次请求都用最新参数：

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import CustomTable from './CustomTable.vue'

const router = useRouter()
let today: Date
let fechaColaEmails = ref('')
let emails = ref([{}])

async function pedirEmails() {
  try {
    // 每次请求时动态拼接URL
    const url = `${import.meta.env.VITE_APP_ROOT_API}${
      import.meta.env.VITE_BACKEND_DASHBOARD_DESA
    }/emails?fecha=${fechaColaEmails.value}`
    console.log('dentro del metodo pedir emails: ' + url)
    const { data } = await axios.get<any[]>(url)
    emails.value = data
  } catch (error) {
    console.log(error)
  }
}

async function submitFecha(fecha: any) {
  let fechT: string = fecha.target.value
  let arrayFecha = fechT.split('-')
  fechaColaEmails.value = arrayFecha[2] + '/' + arrayFecha[1] + '/' + arrayFecha[0]
  console.log('hola')
}

onMounted(async () => {
  today = new Date()
  let dd = String(today.getDate())
  let mm = String(today.getMonth() + 1) //January is 0!
  let yyyy = today.getFullYear()
  fechaColaEmails.value = dd + '/' + mm + '/' + yyyy
  console.log('onMounted: ', fechaColaEmails.value)
  await pedirEmails()
})

function ruta(event: number): void {
  router.push({ name: 'detallesemail', params: { contador: event } })
}
</script>

解决方案2：用computed创建响应式URL（适合多场景复用） #

如果需要在多个地方使用这个URL，可以用computed创建响应式变量，它会自动跟随fechaColaEmails的变化更新：

<script setup lang="ts">
import { onMounted, ref, watch, computed } from 'vue' // 引入computed
import { useRouter } from 'vue-router'
import axios from 'axios'
import CustomTable from './CustomTable.vue'

const router = useRouter()
let today: Date
let fechaColaEmails = ref('')
let emails = ref([{}])

// 响应式URL，fechaColaEmails变化时自动更新
const url = computed(() => `${import.meta.env.VITE_APP_ROOT_API}${
  import.meta.env.VITE_BACKEND_DASHBOARD_DESA
}/emails?fecha=${fechaColaEmails.value}`)

async function pedirEmails() {
  try {
    console.log('dentro del metodo pedir emails: ' + url.value) // 注意取.value
    const { data } = await axios.get<any[]>(url.value)
    emails.value = data
  } catch (error) {
    console.log(error)
  }
}

// 其余代码同解决方案1...
</script>

额外说明 #

你之前在onMounted里打印的url也是初始化时的旧值，所以会和预期不一致。用上面任意一种方案，都能同时解决打印和请求参数的问题。

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