Vue のループフォーム項目例の詳細な説明

Vue のループフォーム項目例の詳細な説明

場合によっては、ユーザーがボタンをクリックして同様のフォームを追加し、クリックごとに 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);
    },
  },
};
</スクリプト>

コード分​​析:
ここではディープ コピー関数がカプセル化されています。フォームの追加をクリックするたびに、定義したオブジェクトのコピーがコピーされます。このオブジェクトは、最初のフォームの値で構成されていることに注意してください。v-for を使用して、最外層の配列リストをトラバースし、「フォームの追加」をクリックするたびにオブジェクトを配列にプッシュします。最後に、「フォームの送信」ボタンをクリックして 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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue.js で v-for ループを使用して動的タグを生成する方法
  • Vue v-for ループを書く 7 つの方法
  • vue v-for ループ オブジェクトの属性
  • Vue ベースの円形スクロールリスト機能を実装する
  • Vue でシンプルな無限ループスクロールアニメーションを実装する例
  • この記事では、vue.jsのイベントループの仕組みを紹介します。

<<:  MYSQLについては、データ型と操作テーブルを知る必要があります

>>:  Nginx 仮想ホストの詳細な分析

推薦する

ユーザーはその理由を知る必要がある

証券会社にいた頃、設計業務が忙しくなかったため、商品のマニュアルを書く役割を担ったことがありました。...

CentOS 7.5 が Varnish キャッシュサーバー機能を導入

1. ワニスの紹介Varnish は、高性能なオープンソースのリバースプロキシサーバーおよび HTT...

Windows10 での MySQL msi インストール チュートリアル (画像とテキスト付き)

1. ダウンロード1. MySQL msi 公式 Web サイトから最新のダウンロードをクリックす...

MySQL の where と on の違いと、いつ使用するか

以前、テーブル結合クエリを書いていたとき、whereとonの違いがわからず、SQLに小さな問題が発生...

vue-cli4.5.xはプロジェクトを素早く構築します

1. vue-cliをインストールする vue.js で vue.js を実行します。 2. プロジ...

MySQLでテーブルデータを削除する方法

MySQL でデータを削除する方法は 2 つあります。1 つは DELETE ステートメント、もう ...

LinuxでHomebrewを使用する正しい方法

多くの人が Linux Homebrew を使用しています。これをより良く使用するための 3 つのヒ...

MySQL数千万の大規模データに対する30のSQLクエリ最適化テクニックの詳細な説明

1. クエリを最適化するには、テーブル全体のスキャンを避けてください。まず、where と orde...

Nginx10m+の高並列カーネル最適化に関する簡単な説明

高い同時実行性とは何ですか?デフォルトの Linux カーネル パラメータは、最も一般的なシナリオ向...

MySql の知識ポイント: トランザクション、インデックス、ロックの原則、使用状況の分析

この記事では、トランザクション、インデックス、ロックなどの MySQL の知識ポイントの原理と使用法...

JavaScriptで配列を作成する方法の詳細な説明

目次JavaScript で配列を作成する配列の使用配列を分割文字列に変換する配列に要素を追加する配...

vue2 vue3 での Echarts の詳細な使用方法

目次1. インストール2. vue2でEchartsを使用するmain.jsファイル内コンテナが与え...

MySQL インデックス プッシュダウンを 5 分で学ぶ

目次序文インデックス プッシュダウンとは何ですか?インデックスプッシュダウン最適化の原理インデックス...

DockerでRedashの中国語版をデプロイしてインストールする方法の詳細な説明

1. インストール手順 Linux 環境でのローカル インストールと比較すると、Docker のイン...