場合によっては、ユーザーがボタンをクリックして同様のフォームを追加し、クリックごとに 1 回追加できるという要件に遭遇することがあります。次に、ディープコピー、Vue.js + ElementUI などを使用する必要があります。効果はおおよそ次のようになります。フォームにはドロップダウン ボックスと 2 つの入力ボックスがあります。ここで [フォームの追加] ボタンをクリックすると、別のフォームが表示されます。[フォームの送信] をクリックすると、2 つのフォームの値を同時に送信できます。 コードは次のとおりです。 <テンプレート> <div> <div スタイル="margin: 10px 0"> <el-button type="primary" @click="addForm">フォームを追加</el-button> <el-button type="primary" @click="submit">フォームを送信</el-button> </div> <div v-for="(item, index) in リスト" :key="index"> <el-form ref="フォーム" label-width="80px"> <el-form-item label="ライブ放送プラットフォーム"> <el-選択 v-model="item.platform" :key="インデックス" placeholder="ライブストリーミングプラットフォームを選択してください" > <el-オプション :label="item2.プラットフォーム名" v-for="(item2, index2) in platformNameList" :key="インデックス2" :value="item2.プラットフォーム値" > </el-option> </el-select> </el-form-item> <el-form-item label="ファンの数"> <el-input v-model="item.fanMount" :key="index"></el-input> </el-form-item> <el-form-item label="プラットフォームID"> <el-input v-model="item.platformId" :key="index"></el-input> </el-form-item> </el-form> </div> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ データ() { 戻る { タイトル:「検査コンテンツページ」、 人オブジェクト: { プラットフォーム: "", ファンマウント: "", プラットフォーム ID: "", }, プラットフォーム名リスト: [ { プラットフォーム名: "Kuaishou", プラットフォーム値: "1", }, { プラットフォーム名: "TikTok", プラットフォーム値: "2", }, { プラットフォーム名: "Taobao", プラットフォーム値: "3", }, ]、 リスト: [ { プラットフォーム: "", ファンマウント: "", プラットフォーム ID: "", }, ]、 }; }, メソッド: { //ディープコピー cloneObj(obj) { レットする; Array.isArray(obj) の場合 { //空の配列を作成します。ret = []; (i = 0 とします; i < obj.length; i++) { ret[i] = this.cloneObj(obj[i]); } ret を返します。 } そうでない場合 (Object.prototype.toString.call(obj) === "[object Object]") { 戻り値: for (let i in obj) { ret[i] = this.cloneObj(obj[i]); } ret を返します。 } それ以外 { obj を返します。 } }, //フォームを追加する addForm() { arr = this.cloneObj(this.personObj) とします。 console.log("arr", arr); this.List.push(arr); }, //フォームを送信するsubmit() { console.log("this.List", this.List); }, }, }; </スクリプト> コード分析: コンソールには次の結果が出力されます。 ここで、フォームを 1 つずつ追加するのではなく、追加するフォームを複数指定する必要があるとします。その効果は次のようになります。ボタンは 3 つあり、最初に 1 つのフォームが表示されます。 「3」ボタンをクリックすると、以下に示すように、インターフェイス上に合計 3 つのフォームが表示されます。 コードは次のとおりです。 <テンプレート> <div> <div スタイル="margin: 10px 0"> <el-button type="primary" @click="add(3)">3</el-button> <el-button type="primary" @click="addForm">フォームを追加</el-button> <el-button type="primary" @click="submit">フォームを送信</el-button> </div> <div v-for="(item, index) in リスト" :key="index"> <el-form ref="フォーム" label-width="80px"> <el-form-item label="ライブ放送プラットフォーム"> <el-選択 v-model="item.platform" :key="インデックス" placeholder="ライブストリーミングプラットフォームを選択してください" > <el-オプション :label="item2.プラットフォーム名" v-for="(item2, index2) in platformNameList" :key="インデックス2" :value="item2.プラットフォーム値" > </el-option> </el-select> </el-form-item> <el-form-item label="ファンの数"> <el-input v-model="item.fanMount" :key="index"></el-input> </el-form-item> <el-form-item label="プラットフォームID"> <el-input v-model="item.platformId" :key="index"></el-input> </el-form-item> </el-form> </div> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ データ() { 戻る { タイトル:「検査コンテンツページ」、 人オブジェクト: { プラットフォーム: "", ファンマウント: "", プラットフォームID: "", }, プラットフォーム名リスト: [ { プラットフォーム名: "Kuaishou", プラットフォーム値: "1", }, { プラットフォーム名: "TikTok", プラットフォーム値: "2", }, { プラットフォーム名: "Taobao", プラットフォーム値: "3", }, ]、 リスト: [ { プラットフォーム: "", ファンマウント: "", プラットフォーム ID: "", }, ]、 }; }, メソッド: { クローンオブジェクト(obj) { レットする; Array.isArray(obj) の場合 { //空の配列を作成します。ret = []; (i = 0 とします; i < obj.length; i++) { ret[i] = this.cloneObj(obj[i]); } ret を返します。 } そうでない場合 (Object.prototype.toString.call(obj) === "[object Object]") { 戻り値: for (let i in obj) { ret[i] = this.cloneObj(obj[i]); } ret を返します。 } それ以外 { obj を返します。 } }, 追加(a) { this.addForm(a); }, フォームを追加します(a) { arr = this.cloneObj(this.personObj) とします。 console.log("arr", arr); this.List.push(arr); a--; もし(a>0){ this.addForm(a - 1); } }, 提出する() { console.log("this.list", this.List); }, }, }; </スクリプト> <スタイル> </スタイル> コード分析は次のとおりです。 ボタンのaddメソッドをクリックした際にフォームの総数が渡され、その後フォームを追加するaddFormメソッドで自己減分、判定、再帰を利用して連続クリック時のコピーを実装します。次に効果を試します コンソールを印刷する これで、Vue でのフォーム項目のループの例に関するこの記事は終了です。Vue のループ フォーム項目に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MYSQLについては、データ型と操作テーブルを知る必要があります
証券会社にいた頃、設計業務が忙しくなかったため、商品のマニュアルを書く役割を担ったことがありました。...
1. ワニスの紹介Varnish は、高性能なオープンソースのリバースプロキシサーバーおよび HTT...
1. ダウンロード1. MySQL msi 公式 Web サイトから最新のダウンロードをクリックす...
以前、テーブル結合クエリを書いていたとき、whereとonの違いがわからず、SQLに小さな問題が発生...
1. vue-cliをインストールする vue.js で vue.js を実行します。 2. プロジ...
1. MySQLを削除する a. sudo apt-get autoremove --purge m...
MySQL でデータを削除する方法は 2 つあります。1 つは DELETE ステートメント、もう ...
多くの人が Linux Homebrew を使用しています。これをより良く使用するための 3 つのヒ...
1. クエリを最適化するには、テーブル全体のスキャンを避けてください。まず、where と orde...
高い同時実行性とは何ですか?デフォルトの Linux カーネル パラメータは、最も一般的なシナリオ向...
この記事では、トランザクション、インデックス、ロックなどの MySQL の知識ポイントの原理と使用法...
目次JavaScript で配列を作成する配列の使用配列を分割文字列に変換する配列に要素を追加する配...
目次1. インストール2. vue2でEchartsを使用するmain.jsファイル内コンテナが与え...
目次序文インデックス プッシュダウンとは何ですか?インデックスプッシュダウン最適化の原理インデックス...
1. インストール手順 Linux 環境でのローカル インストールと比較すると、Docker のイン...