TypeError: Cannot read properties of null (reading 'includes')

I have this error: TypeError: Cannot read properties of null (reading 'includes')

It shows when clicking on this div:

<div v-for="(drone, index) in drones" class="col-md-4 drone-item mb-25 cursor-pointer" @click="setSelectedModel('drone', drone)" :class="{'card-selected': selected_drones.includes(drone.id)}">

JS function:

setSelectedModel(model_type, model) {
                    if(model_type == 'drone') {
                        if(!this.selected_drones.includes(model.id)) {
                            this.selected_drones.push(model.id);
                            console.log(this.selected_drones)
                            this.selected_drones_model.push(model.model_id);
                        }
}
}

the console.log prints the values being added to the array, but in the div it show null

lbecket

3 years ago

Level 39

Are you properly initializing selected_drones?

You could avoid the error by adding a null coalescing operator to your function in the form of a ? before includes:

setSelectedModel(model_type, model) {
  if (model_type === 'drone') {
    if (!this.selected_drones?.includes(model.id)) {
      this.selected_drones.push(model.id);
      console.log(this.selected_drones);
      this.selected_drones_model.push(model.model_id);
    }
  }
}

That doesn't necessarily address the underlying cause, but it would eliminate the error.

Please or to participate in this conversation.