Vue 控制台错误 Uncaught TypeError: _ctx.... is undefined on value with is Defined

Question

我有一个问题我不明白：

只是我要显示来自 API 的一些数据，它一切正常，但我收到一个错误personnel.departmentID，undefined并且我的 vue-debug 工具无法工作。

仅当我departmentID为其余的 while 分配任何内容（如名字、姓氏等）时，我才会得到它。

奇怪的是，departmentID.name等的数据显示正常，但抛出以下错误。

在我的控制台中我收到错误：

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

值其显示正确

输入显示正确的数据

回复

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

由于您的personnel数据是一个async操作，因此您应该有一个v-if指令input以防止其在加载时出错。

将您的数据修复为对象而不是数组，

personnel: {}

你的模板应该更改为，

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