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

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

• javascript
• vue.js
• vuejs3

Share Improve this question Follow edited May 12, 2021 at 15:40 painotpi 6,99622 gold badges3939 silver badges7272 bronze badges asked May 12, 2021 at 15:33 StaryStary 4522 silver badges55 bronze badges 2

• Where's the code with _ctx.personnel.departmentID? – painotpi Commented May 12, 2021 at 15:36
• What is the response JSON you get back from the fetch() call? you have personnel defined as an array. – jrend Commented May 12, 2021 at 15:37

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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>

You've to init the personnel property like :

      data: () => ({
        personnel: {
                  departmentID:{name:'' }
                },
        departments: [],
        location: [],
        loaded: false,
      }),
      async c

Since departmentID is undefined at the first rendering.