ビジネス開発では、バックエンドから返されたインターフェース データに基づいて、フロントエンドがそれをオブジェクト オブジェクトに保存するという状況によく遭遇します。フロントエンドの開発プロセスでは、いくつかのシナリオの利便性のために、オブジェクトに対応する属性を追加する必要がありますが、これらの属性はバックエンドにとって無意味であるため、保存して送信するときに削除することを望みます。 実際のビジネスコード: 保存する前に、対応する 非同期saveData(タイプ、データ){ // 送信時に余分なフィールドを削除する削除 data.isCommonValue データを削除する。isRemoteValue これを待ちます。$request({ ...API.EDIT_SERVICE、 メソッド: type === 'add' ? 'post' : 'put', データ }) } 上記は一般的な書き方ですが、シナリオによっては最善の方法ではなく、副作用が生じる可能性があります。例として以下を説明します。 例上記の状況をよりわかりやすく示すために、例を書き直します (実装を説明するためだけに)。 人 = { id: '001', 名前: 'リガン', メールアドレス: '[email protected]' } リクエスト: バックエンドに送信するときに、電子メール フィールドを削除する必要があります。 方法1: 削除上記のビジネスコード処理方法と同じ person.email を削除する console.log(person) // {id: '001', name: 'ligang'} 元のデータ内の関連属性も削除されます。 Reflect.deleteProperty(人、'メール') 方法2: 分解元のオブジェクトが参照される場合の副作用を回避しながら、新しいオブジェクトを形成します。 {id, name} = 人とする newPerson = {id, name} とします。 console.log(newPerson) // {id: '001'、名前: 'ligang'} 元のデータへの参照は切り取られます。この方法は、保持される属性が少ない場合には単純で理解しやすいですが、保持される属性が多すぎる場合には複雑になります。 {email, ...newPerson} = 人とする console.log(newPerson) // {id: '001'、名前: 'ligang'} 元のデータへの参照は切り取られます。この方法は、保持する属性の数が多い場合には単純で理解しやすいですが、保持する属性の数が少ない場合には複雑になります。 補充するVue では、既に作成されたインスタンスにルートレベルのレスポンシブ プロパティを動的に追加することはできません。以下の方法は無効です。 this.$set(this, 'email', '') this.$set(this.$data, 'email', '') 要約する実際の使用においては、元のデータに影響を与えないように方法 2 を使用することを強くお勧めします。特に mvvm フレームワークでは、元のデータが応答していることが多いです。delete データ () { 戻る { 人: 名前: 'リガン', メールアドレス: '[email protected]' } } }, メソッド: { 削除プロパティ() { この人物のメールを削除 // this.$delete(this.person, 'email') }, プロパティを追加します(){ this.person.email = 'xxx' this.$set(this.person, 'address', 'xxx') } } 1. 2. 1. 2. この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: 純粋な CSS3 でペットの鶏のサンプルコードを実現
>>: MySQLデータベースでコマンドを自動補完する3つの方法
1. 分業とプロセス<br />Tudou.comでは、プロジェクト開発が中核であり、誰...
目次1. Javascript とは何ですか? 2. DOMとは何か3. JSコードの実行方法4. ...
この記事では、マーキースタイルのテキストの水平スクロールを実現するためのVueの具体的なコードを参考...
数字で始まる次の CSS クラス名は有効になりません。 .1番目{ 色: 赤; }有効な CSS ク...
リンクのターゲット属性は、リンクが開く場所を決定します。その値は通常、_blank、_self、_p...
環境変数の設定の簡単な説明プログラムは、環境によって異なる環境変数を必要とします。たとえば、実稼働環...
まず、Navicat for MySQL をダウンロードしてインストールする必要があります。正規版の...
1. スクロールビュー垂直スクロールを使用する場合は、固定の高さを指定して CSS で高さを設定する...
コマンド: mysqlhotcopyこのコマンドは、ファイルをコピーする前にテーブルをロックし、不完...
序文導入Lombok は、Google Guava と同様に便利なツールであり、強くお勧めします。す...
今日、仕事中に左結合に関するSQLの問題に遭遇しました。後で解決しましたが、この問題を通じてSQLの...
以前、インターネット上で動的ルーティング設定をいくつか見たことがありましたが、現在のプロジェクトとは...
導入: springboot プロジェクトを実行する Docker の構成は実は非常にシンプルで、L...
Apache Arrow は、BigQuery を含むさまざまなビッグデータ ツールで使用される一...
1. はじめに少し前、開発者がテスト環境や本番環境で誤った操作をし、データベースを誤って削除/更新し...