Error in render: "TypeError: Cannot convert undefined or null to object" in vue js?

Question

Everythings works fine and i m also getting the data but i m 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 ?

you probably initialize some variable that you use in render as null, and then fill it with the data from your network request. Vue tries to render your component for the first time before the request returned the data, hence it throws an error about being unable to use null as an object. Do add a closure in your markup not to render the portions of the page that require data from the network request before it's ready — grreeenn
– grreeenn, Commented Feb 2, 2021 at 21:52
i m passing the patient data into props of other component <health-condition :patient="patient" @openForm="toggleFormTable" ></health-condition> — srijan lama
– srijan lama, Commented Feb 2, 2021 at 21:56
if patient is null or undefined before the network request, and you're trying to render some of its props you'll get this error. Add protection and you'll be fine — grreeenn
– grreeenn, Commented Feb 3, 2021 at 0:02
@grreeenn, "add protection" doesn't mean anything to someone who doesn't know what you're talking about. You could have as well said: "wear a helmet" (or a mask, given the context). Cheers! — tao
– tao, Commented Feb 3, 2021 at 0:56

tao · Accepted Answer · 2021-02-03 00:51:33Z

2

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" />

answered Feb 3, 2021 at 0:51

tao

91.1k18 gold badges137 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Error in render: "TypeError: Cannot convert undefined or null to object" in vue js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related