Error while adding Dynamic Components

radhika248

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>

metalsadman

@radhika248 first off, you should move your api calls at other options/hook, at created/mounted ideally.

radhika248

I called api in created() hook now.

chyde90

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" because opt 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"

radhika248

Thank you @chyde90 .It work’s