Wie kann der Fehler behoben werden, dass Vue die Seite so ändert, dass die ID keinen Standardwert hat?

Vue ist ein Front-End-Entwicklungsframework, das es Entwicklern ermöglicht, interaktive Webanwendungen effizienter zu erstellen. Bei der Entwicklung mit Vue treten jedoch manchmal Probleme auf.

Eine davon ist, dass beim Ändern der Daten auf der Seite ein Fehler auftritt, dass die ID keinen Standardwert hat. Dieser Fehler lässt sich eigentlich leicht beheben. In diesem Artikel erfahren Sie, wie Sie ihn beheben können.

Werfen wir zunächst einen Blick auf die spezifischen Erscheinungsformen dieses Fehlers. Wenn wir in Vue das V-Modell zum Binden von Daten verwenden, ist das Ändern von Daten ein sehr häufiger Vorgang. Zum Beispiel:

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

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

Dieser Code ist sehr einfach. Wir binden einen Variablennamen über das V-Modell und binden ihn an ein Eingabeelement. Wenn wir Inhalte in das Eingabefeld eingeben, ändert sich auch der Wert von Name. Wenn wir auf die Schaltfläche „Speichern“ klicken, senden wir eine Anfrage an den Server, um die geänderten Daten zu speichern.

Wenn wir jedoch die Konsole öffnen, um die Netzwerkanfrage anzuzeigen, finden wir eine Fehlermeldung:

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

Diese Fehlermeldung teilt uns mit, dass der Server beim Senden der Anfrage an den Server einen Fehler wegen einer Verletzung der Datenbankintegritätsbeschränkung gemeldet hat. Konkret forderte der Server uns auf, einen ID-Wert zu übergeben, aber wir haben ihn beim Senden der Anfrage nicht übergeben, sodass der Server einen Fehler zurückgegeben hat.

Warum tritt dieser Fehler auf? Die Hauptursache für diesen Fehler liegt darin, dass mit dem V-Modell gebundene Daten standardmäßig nicht das ID-Feld enthalten. In unserem Beispiel haben wir nur ein Namensfeld gebunden, nicht jedoch das ID-Feld.

Um dieses Problem zu lösen, müssen wir zwei Dinge tun:

1. Fügen Sie ein ID-Feld zum Datenmodell hinzu.
2. Fügen Sie unserem Formular ein verstecktes ID-Feld hinzu. Der Wert dieses Felds kann aus den von zurückgegebenen Daten ermittelt werden Der Server Ruft es ab, damit wir den ID-Wert an den Server übergeben können, wenn wir die Daten ändern.

Jetzt schauen wir uns an, wie man diese beiden Schritte umsetzt.

Zuerst müssen wir das ID-Feld zum Datenmodell hinzufügen. Fügen Sie ein ID-Feld zu Vues Daten hinzu, etwa so:

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

Fügen Sie dann ein verstecktes ID-Feld zu unserem Formular hinzu:

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

Beachten Sie, dass wir type="hidden" für das ID-Feld festlegen, damit es nicht angezeigt wird die Seite. Wir binden den Wert des ID-Felds an ein verstecktes Eingabeelement, damit der ID-Wert beim Senden einer Anfrage an den Server übergeben werden kann.

Jetzt ändern wir die Speichermethode und übergeben den ID-Wert ebenfalls an den Server:

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

Jetzt haben wir dieses Problem erfolgreich gelöst. Wir können die Daten normal ändern und stoßen nicht mehr auf den Fehler, dass die ID keinen Standardwert hat.

Zusammenfassend lässt sich sagen, dass wir manchmal auf seltsame Fehler stoßen, wenn wir das Vue-Framework für die Entwicklung verwenden. In diesem Artikel haben wir erfahren, wie Sie den Fehler „ID hat keinen Standardwert“ beheben können, der beim Speichern von Daten aufgetreten ist. Wir haben festgestellt, dass die Hauptursache für diesen Fehler darin bestand, dass wir das ID-Feld im Datenmodell nicht definiert haben. Wir konnten dieses Problem lösen, indem wir ein ID-Feld hinzugefügt und es an ein verstecktes Eingabeelement gebunden haben.

Das obige ist der detaillierte Inhalt vonWie kann der Fehler behoben werden, dass Vue die Seite so ändert, dass die ID keinen Standardwert hat?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!