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 をよろしくお願いいたします。

以下もご興味があるかもしれません: