Vue.js将axios请求数据通过props传子组件时提示paciente未定义如何解决

架构老林

2026-9-29

问题根源

你遇到的报错是变量作用域问题：
paciente是v-for="(paciente, index) in pacientes"循环内部的局部变量，仅在v-for绑定的div标签及其内部子元素范围内可访问，你把<editarPaciente />组件放在了v-for循环的外部，自然无法读取到该变量，因此触发未定义报错。
另外你当前的编辑按钮点击逻辑只修改了显示状态s1，没有把当前选中的患者数据存储到父组件的全局响应式变量中，也会导致子组件拿不到对应数据。

修复步骤

先在父组件的data配置中新增一个响应式变量存储选中的患者数据：

data() {
  return {
    // 原有变量如s1、bExcluir等保留即可
    pacienteAtivo: null
  }
}

修改编辑按钮的点击事件，把当前循环项的患者数据赋值给新增的变量：
把原来的代码

<button class="botao " @click="s1 = 1, bExcluir = false">

替换为：

<button class="botao " @click="s1 = 1; bExcluir = false; pacienteAtivo = paciente">

修改子组件的props绑定逻辑，使用父组件存储的选中患者数据，同时增加非空判断避免初始渲染报错：
把原来的代码

<div v-else-if="s1 == 1">
  <editarPaciente :nomePessoa="paciente.nome"
       :cpfPessoa="paciente.cpf" :senhaPessoa="paciente.senha" :id="paciente.idpaciente" :key="paciente.idpaciente"/>
</div>

替换为：

<div v-else-if="s1 == 1 && pacienteAtivo">
  <editarPaciente 
    :nomePessoa="pacienteAtivo.nome"
    :cpfPessoa="pacienteAtivo.cpf" 
    :senhaPessoa="pacienteAtivo.senha" 
    :id="pacienteAtivo.idpaciente" 
    :key="pacienteAtivo.idpaciente"
  />
</div>