Vue console error Uncaught TypeError: _ctx…. is undefined on value with is defined

I have an issue with I don’t understand:

simply I going to display some data from API its all works perfectly but I getting an error that personnel.departmentID is undefined, and my vue-debug tool not working.

I’m getting it only when I assign anything from departmentID while for the rest like firstName, lastName, etc.

The strange thing that data for departmentID.name etc. it’s displaying properly but it throws the following error.

in my console I getting an error:

Uncaught TypeError: _ctx.personnel.departmentID is undefined
    render edit_personnel.vue:64
    renderComponentRoot runtime-core.esm-bundler.js:846
    componentEffect runtime-core.esm-bundler.js:4280
    reactiveEffect reactivity.esm-bundler.js:42
    effect reactivity.esm-bundler.js:17
    setupRenderEffect runtime-core.esm-bundler.js:4263
    mountComponent runtime-core.esm-bundler.js:4222
    processComponent runtime-core.esm-bundler.js:4182
    patch runtime-core.esm-bundler.js:3791
    render runtime-core.esm-bundler.js:4883
    mount runtime-core.esm-bundler.js:3077
    mount runtime-dom.esm-bundler.js:1259
    js personnel_edit.js:4
    Webpack 7

Value its displayed properly

input displayed with correct data

response

<input type="text" class="form-control" v-model="personnel.departmentID.name" :key="personnel.departmentID.name" />
    </form>
  </div>
</template>
    
<script>

export default {
  name: "edit_personnel",
  data: () => ({
    personnel: [],
    departments: [],
    location: [],
    loaded: false,
  }),
  async created() {
    await fetch(window.currentUserId)
        .then(response => response.json())
        .then(data => {
          this.personnel = data;
          this.loaded = true;
        });
  }
}
</script>

Answer

Since your personnel data is an async action, you should have a v-if directive on your input to prevent it from erroring on load.

Fix your data to be an object instead of an array,

personnel: {}

And your template should change to,

    <input
      v-if="personnel.departmentID"
      type="text" 
      class="form-control" 
      v-model="personnel.departmentID.name" 
      :key="personnel.departmentID.name" />
  </form>
</div>
</template>

Advertisement

Answer