Comment résoudre l'erreur de vue en modifiant la page dont l'identifiant n'a pas de valeur par défaut ?

Vue est un framework de développement front-end qui permet aux développeurs de créer des applications Web interactives plus efficacement. Cependant, lors du développement avec Vue, vous rencontrez parfois quelques problèmes.

L'un d'eux est que lors de la modification des données sur la page, il y aura une erreur indiquant que l'identifiant n'a pas de valeur par défaut. Cette erreur est en fait facile à corriger, et cet article détaille comment la corriger.

Tout d’abord, examinons les manifestations spécifiques de cette erreur. Dans Vue, lorsque nous utilisons v-model pour lier des données, la modification des données est une opération très courante. Par exemple :

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

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

Ce code est très simple. Nous lions un nom de variable via v-model et le lions à un élément d'entrée. Lorsque nous saisissons du contenu dans la zone de saisie, la valeur du nom change également. Lorsque nous cliquons sur le bouton "Enregistrer", nous enverrons une demande au serveur pour enregistrer les données modifiées.

Cependant, lorsque nous ouvrons la console pour afficher la requête réseau, nous trouverons un message d'erreur :

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

Ce message d'erreur nous indique que lorsque nous avons envoyé la requête au serveur, le serveur a signalé une erreur de violation de contrainte d'intégrité de la base de données. Plus précisément, le serveur nous a demandé de transmettre une valeur d'identifiant, mais nous ne l'avons pas transmise lorsque nous avons envoyé la demande, le serveur a donc renvoyé une erreur.

Alors, pourquoi cette erreur se produit-elle ? La cause première de cette erreur est que les données liées à l'aide de v-model ne contiennent pas le champ id par défaut. Dans notre exemple, nous avons uniquement lié un champ name, mais pas le champ id.

Pour résoudre ce problème, nous devons faire deux choses :

1. Ajouter un champ d'identification dans le modèle de données ;
2. Ajouter un champ d'identification caché à notre formulaire, la valeur de ce champ peut être obtenue à partir des données renvoyées par le serveur Obtenez-le pour que lorsque nous modifions les données, nous puissions transmettre la valeur de l'identifiant au serveur.

Voyons maintenant comment mettre en œuvre ces deux étapes.

Tout d'abord, nous devons ajouter le champ id au modèle de données. Ajoutez un champ d'identification aux données de Vue, comme ceci :

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

Ensuite, ajoutez un champ d'identification caché à notre formulaire :

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

Notez que nous définissons type="hidden" pour le champ d'identification afin qu'il ne soit pas affiché sur la page. Nous lions la valeur du champ id à un élément d'entrée masqué afin que la valeur id puisse être transmise au serveur lors de l'envoi d'une requête.

Maintenant, modifions la méthode de sauvegarde et transmettons également la valeur de l'identifiant au serveur :

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

Maintenant, nous avons résolu ce problème avec succès. Nous pouvons modifier les données normalement et ne plus rencontrer l'erreur selon laquelle l'identifiant n'a pas de valeur par défaut.

Pour résumer, lorsque nous utilisons le framework Vue pour le développement, nous rencontrons parfois des erreurs étranges. Dans cet article, nous avons appris comment résoudre l’erreur d’identifiant sans valeur par défaut rencontrée lors de l’enregistrement des données. Nous avons constaté que la cause première de cette erreur était que nous n'avions pas défini le champ id dans le modèle de données. Nous avons pu résoudre ce problème en ajoutant un champ id et en le liant à un élément d'entrée masqué.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!