Bagaimana untuk menyelesaikan laporan ralat halaman pengubahsuaian vue yang id tidak mempunyai nilai lalai

Vue ialah rangka kerja pembangunan bahagian hadapan yang membolehkan pembangun membina aplikasi web interaktif dengan lebih cekap. Walau bagaimanapun, apabila membangunkan dengan Vue, anda kadangkala menghadapi beberapa masalah.

Salah satunya ialah apabila mengubah suai data pada halaman, akan berlaku ralat bahawa id tidak mempunyai nilai lalai. Ralat ini sebenarnya mudah dibetulkan, dan artikel ini akan memperincikan cara membetulkannya.

Pertama, mari kita lihat manifestasi khusus ralat ini. Dalam Vue, apabila kami menggunakan v-model untuk mengikat data, mengubah suai data adalah operasi yang sangat biasa. Contohnya:

<template>
  <div>
    <input v-model="name">
    <button @click="save">保存</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    }
  },
  methods: {
    save() {
      // 发送请求保存数据
    }
  }
}
</script>

Kod ini sangat mudah Kami mengikat nama pembolehubah melalui v-model dan mengikatnya pada elemen input. Apabila kita memasukkan kandungan dalam kotak input, nilai nama juga berubah. Apabila kami mengklik butang "Simpan", kami akan menghantar permintaan kepada pelayan untuk menyimpan data yang diubah suai.

Walau bagaimanapun, apabila kami membuka konsol untuk melihat permintaan rangkaian, kami akan menemui mesej ralat:

SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'id' cannot be null

Mesej ralat ini memberitahu kami bahawa apabila kami menghantar permintaan kepada pelayan, pelayan Ralat pelanggaran kekangan integriti pangkalan data telah dilaporkan. Khususnya, pelayan meminta kami untuk menghantar nilai id, tetapi kami tidak menghantarnya apabila kami menghantar permintaan, jadi pelayan mengembalikan ralat.

Jadi, mengapa ralat ini berlaku? Punca ralat ini ialah data terikat menggunakan model v tidak mengandungi medan id secara lalai. Dalam contoh kami, kami hanya mengikat medan nama, tetapi bukan medan id.

Untuk menyelesaikan masalah ini, kita perlu melakukan dua perkara:

1. Tambah medan id pada model data
2. Tambah medan id tersembunyi pada borang kami medan id, nilai medan ini boleh diperolehi daripada data yang dikembalikan oleh pelayan, supaya apabila kita mengubah suai data, kita boleh menghantar nilai id kepada pelayan.

Sekarang mari kita lihat cara melaksanakan kedua-dua langkah ini.

Pertama, kita perlu menambah medan id pada model data. Tambahkan medan id pada data Vue, seperti ini:

data() {
  return {
    id: null, // 默认值为null，因为在创建新对象时可能还没有id
    name: ''
  }
}

Kemudian, tambah medan id tersembunyi pada borang kami:

<template>
  <div>
    <input v-model="name">
    <input type="hidden" v-model="id">
    <button @click="save">保存</button>
  </div>
</template>

Perhatikan bahawa kami Medan id ditetapkan untuk menaip ="hidden" supaya ia tidak dipaparkan pada halaman. Kami mengikat nilai medan id kepada elemen input tersembunyi supaya nilai id boleh dihantar ke pelayan semasa menghantar permintaan.

Sekarang, mari kita ubah suai kaedah simpan untuk turut menghantar nilai id ke pelayan:

save() {
  // 发送请求保存数据
  const data = {
    id: this.id,
    name: this.name
  }
  axios.post('/api/save', data).then(response => {
    // 处理成功
  }).catch(error => {
    // 处理失败
  })
}

Kini, kami telah berjaya menyelesaikan masalah ini. Kami boleh mengubah suai data secara normal dan tidak lagi menghadapi ralat bahawa id tidak mempunyai nilai lalai.

Untuk meringkaskan, apabila kami menggunakan rangka kerja Vue untuk pembangunan, kadangkala kami menghadapi beberapa ralat pelik. Dalam artikel ini, kami mempelajari cara menyelesaikan id tiada ralat nilai lalai yang dihadapi semasa menyimpan data. Kami mendapati bahawa punca ralat ini ialah kami tidak mentakrifkan medan id dalam model data. Kami dapat menyelesaikan masalah ini dengan menambahkan medan id dan mengikatnya pada elemen input tersembunyi.

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan laporan ralat halaman pengubahsuaian vue yang id tidak mempunyai nilai lalai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!