ID にデフォルト値がないというページを変更する vue のエラーを解決するにはどうすればよいですか?

Vue は、開発者がインタラクティブな Web アプリケーションをより効率的に構築できるようにするフロントエンド開発フレームワークです。ただし、Vue を使用して開発する場合、時々問題が発生することがあります。

その 1 つは、ページ上のデータを変更するときに、ID にデフォルト値がないというエラーが発生することです。このエラーは実際には簡単に修正できます。この記事では修正方法について詳しく説明します。

まず、このエラーの具体的な症状を見てみましょう。 Vue では、v-model を使用してデータをバインドする場合、データの変更は非常に一般的な操作です。例:

このコードは非常に単純で、v-model を介して変数名をバインドし、それを入力要素にバインドします。入力ボックスに内容を入力すると、名前の値も変更されます。 「保存」ボタンをクリックすると、変更されたデータを保存するリクエストがサーバーに送信されます。

ただし、コンソールを開いてネットワーク リクエストを表示すると、次のエラー メッセージが表示されます。

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

このエラー メッセージは、リクエストをサーバーに送信したときに、サーバーがデータベース整合性制約違反エラーが報告されました。具体的には、サーバーは ID 値を渡すように要求しましたが、リクエストの送信時にこの値を渡さなかったため、サーバーはエラーを返しました。

それでは、なぜこのエラーが発生するのでしょうか?このエラーの根本原因は、v-model を使用してバインドされたデータにデフォルトで id フィールドが含まれていないことです。この例では、name フィールドのみをバインドしましたが、id フィールドはバインドしませんでした。

この問題を解決するには、次の 2 つのことを行う必要があります:

1. データ モデルに id フィールドを追加する;
2. データ モデルに隠しフィールドを追加するフォーム ID フィールドでは、このフィールドの値はサーバーから返されたデータから取得できるため、データを変更するときに ID 値をサーバーに渡すことができます。

次に、これら 2 つのステップを実装する方法を見てみましょう。

まず、データ モデルに id フィールドを追加する必要があります。次のように ID フィールドを Vue のデータに追加します:

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

次に、非表示の ID フィールドをフォームに追加します:

ID フィールド type="hidden" を設定していることに注意してください。ページには表示されません。 id フィールドの値を非表示の入力要素にバインドして、リクエストの送信時に id 値をサーバーに渡すことができるようにします。

次に、save メソッドを変更して、ID 値をサーバーに渡しましょう:

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

これで、この問題は正常に解決されました。データを正常に変更でき、ID にデフォルト値がないというエラーは発生しなくなりました。

要約すると、開発に Vue フレームワークを使用すると、時々奇妙なエラーが発生することがあります。この記事では、データの保存中に発生した「ID にデフォルト値がありません」エラーを解決する方法を学びました。このエラーの根本原因は、データ モデルで id フィールドを定義していないことであることがわかりました。 id フィールドを追加し、それを非表示の入力要素にバインドすることで、この問題を解決できました。

以上がID にデフォルト値がないというページを変更する vue のエラーを解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。