Saya memiliki masalah dengan saya tidak mengerti:

Cukup saya akan menampilkan beberapa data dari API semuanya berfungsi dengan baik tetapi saya mendapatkan kesalahan bahwa personnel.departmentID adalah undefined, dan alat vue-debug saya tidak berfungsi.

Saya mendapatkannya hanya ketika saya menetapkan sesuatu dari departmentID sedangkan sisanya seperti firstName, lastName, dll.

Hal yang aneh bahwa data untuk departmentID.name dll. ditampilkan dengan benar tetapi memunculkan kesalahan berikut.

Di konsol saya, saya mendapatkan kesalahan:

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

Nilai yang ditampilkan dengan benar

input ditampilkan dengan data yang benar

tanggapan

<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>
1
Stary 12 Mei 2021, 18:33

2 jawaban

Jawaban Terbaik

Karena data personnel Anda adalah tindakan async, Anda harus memiliki perintah v-if di input untuk mencegahnya dari kesalahan saat dimuat.

Perbaiki data Anda menjadi objek, bukan array,

personnel: {}

Dan template Anda harus berubah menjadi,

    <input
      v-if="personnel.departmentID"
      type="text" 
      class="form-control" 
      v-model="personnel.departmentID.name" 
      :key="personnel.departmentID.name" />
  </form>
</div>
</template>
3
painotpi 12 Mei 2021, 15:47

Anda harus init properti personnel seperti :

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

Karena departmentID tidak terdefinisi pada rendering pertama.

1
Boussadjra Brahim 12 Mei 2021, 16:04