v-model issue on checkbox


Topic: v-model issue on checkbox

cawgit pro premium asked a year ago

*Expected behavior*v-model not to report an error. Please note the code below is just the exceprts obviously the is in the template and the ic_record item is in the data() return() in the script section.

*Actual behavior*Error Received: [Vue warn]: Error in render: "TypeError: Cannot read property 'trainee' of undefined"

Resources (screenshots, code snippets etc.)

    <mdb-input type="checkbox" class="my-0 align-bottom" v-model="ic_record.trainee" color="primary" @click.native="ic_record.trainee = !(ic_record.trainee != false)"/>

   ic_record: {
      alwyasavailable: null,
      area: '',
      areasort: null,
      capid: '',
      cellphone: null,
      email: '',
      homephone: null,
      ictype: '',
      ictypeweight: null,
      id: null,
      membersort: null,
      mentor: '',
      name: '',
      radio: '',
      sortpriority: null,
      trainee: false,
      workphone: null
    },

I get the following error when I open the component

[Vue warn]: Error in render: "TypeError: Cannot read property 'trainee' of undefined"


Magdalena Dembna staff premium answered a year ago

Hi, I've recreated you issue and didn't get mention error. It would help if I could see your entire data(). In any case, checkbox needs to have an id to work correctly. The following code example seems to work fine:

<template>
  <div>
    <mdb-input type="checkbox" id="checkbox_id" class="my-0 align-bottom" v-model="ic_record.trainee" color="primary"/>
    {{ic_record.trainee}}
  </div>
</template>

<script>
import { mdbInput } from 'mdbvue';
export default {
  components: {
    mdbInput
  },
  data () {
    return {
      ic_record: {
      alwyasavailable: null,
      area: '',
      areasort: null,
      capid: '',
      cellphone: null,
      email: '',
      homephone: null,
      ictype: '',
      ictypeweight: null,
      id: null,
      membersort: null,
      mentor: '',
      name: '',
      radio: '',
      sortpriority: null,
      trainee: false,
      workphone: null
      }
    };
  }
}
</script> 

cawgit pro premium answered a year ago

Here is the entire template and data(), I added the ID to the element and I still get the errors

Here is a snippet

  https://mdbootstrap.com/snippets/vue/cawgit/740545


cawgit pro premium answered a year ago

It appears that if I remove the created function, this does not report and error. The created function is there to pull data to populate another Dropdown on the same form, which is required. As when I select a name from the dropdown, it then pulls the actual contents of the ic_record. But I am initiating the ic_record object in the data() so I am unclear as to why this creates an error. But simply removing the created function, stops the error. I need the functionality that is in the created function, I tried a couple other locations, beforeCreated, beforeMounted, Mounted... same error. If I move it to updated it stop complaining, but I do not get the data in the dropdown that I need.


cawgit pro premium answered a year ago

If someone could please take a look at this asap. the time difference here is killing me, I cannot wait 12-16 hours between question and response. Please let me know your suggestions.


Magdalena Dembna staff premium answered a year ago

It's not possible to recreate an issue without a module you're importing from a config file. I believe a better practice would be to make API call in a mounted hook. If you're getting undefined I believe the problem lays here: this.ic_record = json; .You're overwritting ic_records and clearly json is not defined. I think you need to test your API call and make sure that you're getting a response you're expecting. Kind regards, Magdalena


cawgit pro premium commented a year ago

The error occurs before, the getICdetails call, which is where I am overwriting the value. The API call works every time. I posted above what I discovered regarding the CREATED function. If I remove the content from CREATED it appears to work, but the CREATED content needs to remain. Furthermore, if I move the record to a top level variables in the data() Return() section it works fine as is. It is only when I use a (2) level variable, that this is an issue. for example

data () { return () { ic_id: 12345 <-- works fine, ic_record: { id:12345 <-- CAUSES THE ERROR } } }


cawgit pro premium answered a year ago

Here was the problem. In the Select I had a line

<mdb-col name="ic-name" class="my-0" md="4">
<label class="font-weight-bold my-0">Incident Commander</label>
<mdb-select class="my-0" ref="ic" name="ic" id="ic" v-model="ic_list" color="primary" @getValue="getICDetail($event)"/>

apparently the @getValue is firing when the select is being populated and nothing was selected. Which is why my API call was failing. I added a check to the function the @getValue is calling to ensure there is actually something selected and now it works.

I guess this is because I am injecting a null entry and selecting it which is why the event fires with a null $event.

Thank you for taking a look, but I guess it makes sense that if you mark an item selected even though it is the default null value that the @GetValue will fire.

Appreciate the help.


Magdalena Dembna staff premium commented a year ago

I'm glad that you've managed to solve this. Good luck with your project, Magdalena


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: Vue
  • MDB Version: 5.3.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No