渲染错误：“TypeError：无法在 vue js 中将未定义或 null 转换为对象”？

Question

Everythings works fine and im also getting the data but im getting this javascript error.

I have following network request

    data: {
    patient: null
    }
    methods: {
    
    
    //call methods to add patients
    setPatient(patient) {
          this.patient = patient;
        },
      }
//network request in navigation guard
  async beforeRouteEnter(to, from, next) {
    await axios
      .post(route("api.patient.ids"), { ids: [to.params.id] })
      .then((res) => {
        if (res.data.length) {
          next((vm) => {
            // console.log(typeof res.data[0]);
            vm.setPatient(res.data[0]);
          });
        }
      });
  },

somebody could explain whats causing the problem?

Answer 1

Place a v-if="patient" on any template element which requires patient to be an object. Your patient is null initially, until the API call returns and you commit it.

In your case:

<health-condition v-if="patient"
                  :patient="patient"
                  @openForm="toggleFormTable" />