No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Error while adding Dynamic Components

    Help
    3
    5
    217
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • R
      radhika248 last edited by

      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>
      1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman last edited by

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

        1 Reply Last reply Reply Quote 0
        • R
          radhika248 last edited by

          I called api in created() hook now.

          1 Reply Last reply Reply Quote 0
          • C
            chyde90 last edited by 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"
            
            1 Reply Last reply Reply Quote 0
            • R
              radhika248 last edited by

              Thank you @chyde90 .It work’s

              1 Reply Last reply Reply Quote 0
              • First post
                Last post