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


  • Thank you @chyde90 .It work’s


Log in to reply