ビジネス開発では、バックエンドから返されたインターフェース データに基づいて、フロントエンドがそれをオブジェクト オブジェクトに保存するという状況によく遭遇します。フロントエンドの開発プロセスでは、いくつかのシナリオの利便性のために、オブジェクトに対応する属性を追加する必要がありますが、これらの属性はバックエンドにとって無意味であるため、保存して送信するときに削除することを望みます。 実際のビジネスコード: 保存する前に、対応する 非同期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つの方法
Syn 攻撃は、最も一般的で最も簡単に悪用される攻撃方法です。TCP プロトコルの欠陥を利用して、偽...
この記事では、主に HTML + CSS を使用してテキストの折りたたみ特殊効果を実現する例を紹介し...
現在、layuiの関係者はlayim友達検索ページの構造とスタイルを提供していません。私は個人的に非...
スクリプトをデバッグモードで実行するbash -x <script> を使用すると、スク...
序文MySQL が SQL SELECT コマンドと WHERE 句を使用してテーブルからデータを読...
この記事では、MySQL 8.0.11のインストールチュートリアルを参考までに紹介します。具体的な内...
序文:プロジェクトの開発中に、1 行にナビゲーション バーが多すぎる場合に水平スクロール バーを実装...
1. CSSナビゲーションバー(1)ナビゲーションバーの機能ナビゲーション バーを使いこなすことは、...
まず、SFTP プロトコルと FTP プロトコルの違いを理解してください。ここでは詳細には触れません...
この記事では、Vue3.0の手書きカルーセル効果の具体的なコードを参考までに共有します。具体的な内容...
これは Linux 管理者にとって重要な (そして素晴らしい) トピックなので、誰もが Linux ...
1. 概要Group by は、by の後の規則に従ってデータをグループ化することを意味します。いわ...
1. Docker Composeの概要Compose は、マルチコンテナ Docker アプリケー...
1. /etc/init.d ディレクトリに入ります: cd /etc/init.d 2. tomc...
借財宝は最近人気が出ている携帯電話ローンソフトウェアプラットフォームです。知人同士の貸し借りが特徴で...