Error while adding Dynamic Components
-
I am trying to add the component dynamically,while adding component I got error :“TypeError: Cannot read property ‘id’ of null”
TypeError: Cannot read property ‘id’ of null<template> <div v-for="(line, index) in lines" v-bind:key="index" class="row"> <div class="row"> <div class="col-6"> <q-select outlined v-model="line.disease" :options="disease_data" //Data fetched from API :option-value="opt => opt.id" :option-label="opt => opt.name" emit-value map-options style="max-width: 300px" /> </div> <div class="col-md-6"> <div> <q-btn @click="removeLine(index)" icon="delete" round /> <q-btn v-if="index + 1 === lines.length" @click="addLine" icon="playlist-plus" round /> </div> </div> </div> </div> </template> <script> export default { data(){ var token1=localStorage.getItem('token') console.log(token1) if ( token1 == null ) { this.$router.push({path: '/'}) } else { var baseurl='http://127.0.0.1:8000/api/' this.$axios.get(baseurl+'patientget',+token1) .then((response) => { console.log(response) for(var i=0; i<response.data.length; i++) { this.patient_data.push({name:response.data[i].patient_firstname,id:response.data[i].patient_id}); } console.log(this.patient_data) }) this.$axios.get(baseurl+'diseaseget',+token1) .then((response) => { console.log(response) for(var i=0; i<response.data.length; i++) { this.disease_data.push({name:response.data[i].diseases_name,id:response.data[i].diseases_id}); } console.log(this.disease_data) }) } return{ id:'', height:'', patient:'', weigth:'', fees:'', disease:'', lines: [], data:[], patient_data:[], disease_data:[], name:'', } }, watch: { lines () { this.blockRemoval = this.lines.length <= 1 } }, methods: { addLine () { let checkEmptyLines = this.lines.filter(line => line.disease === null) if (checkEmptyLines.length >= 1 && this.lines.length > 0) return this.lines.push({ disease: null, }) }, removeLine (lineId) { if (!this.blockRemoval) this.lines.splice(lineId, 1) } }, mounted () { this.addLine() } } </script>
-
@radhika248 first off, you should move your api calls at other options/hook, at created/mounted ideally.
-
I called api in created() hook now.
-
I’m sorry, I don’t understand your code snippet very well.
It would be easier if you exclude everything that is irrelevant for the error. Sometimes isolating the problem helps tremendously on it’s own!From what I can tell is that you are putting
null
in the v-model of the <q-select>
And it breaks:option-value="opt => opt.id"
becauseopt
is null.I think this could prevent the error:
<q-select ... :option-value="opt => opt === null ? null : opt.id" :option-label="opt => opt === null ? '' : opt.name"
-
Thank you @chyde90 .It work’s