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.

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

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.

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.

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

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>