Vueは小さなフォーム検証機能を実装します

「@/views/create/create.vue」からCreateをインポートします。

//公開される名前の最初の文字は大文字にする必要があります。以下はフォームページが配置されているディレクトリです @ は .. の略語で、前のレベルに戻ることを意味します const router = new Router ({
mode:"history"//これはルートモードです。routes:[
{
      パス: "/create", //デフォルトは/です。パスが複数ある場合は、/にパス名を加えたものになります: "create",
      コンポーネント: 作成、
      タイトル: 「フォーム」、
    },
]
})

<router-link :to="{ name: 'create' }" class="collection">フォーム</router-link>

<テンプレート>
  <div class="create">
    <h2>新しいレシピの公開を歓迎します。まずはあなたの傑作を紹介してください。 </h2>
    <セクション class="create-introduce">
      <h5>タイトル</h5>
 
      <el-入力
        v-model="backData.title"
        クラス="create-input"
        placeholder="コンテンツを入力してください"
      </el-input> ...
      <h5>属性</h5>
      <div>
        <el-選択
          v-for="プロパティ内の項目"
          :key="アイテム.親名"
          :placeholder="アイテム.親名"
          v-model="backData.property[item.title]"
        >
          <el-オプション
            v-for="item.list 内のオプション"
            :key="オプションタイプ"
            :label="オプション名"
            :value="オプションタイプ"
          >
          </el-option>
        </el-select>
      </div>
      <h5>レシピのカテゴリー</h5>
      <div>
        <el-select placeholder="レシピのカテゴリーを選択してください" v-model="backData.classify">
          <el-オプショングループ
            v-for="group in classifies"
            :key="グループ.親タイプ"
            :label="グループ.親名"
          >
            <el-オプション
              v-for="group.list 内の項目"
              :key="アイテムタイプ"
              :label="アイテム名"
              :value="アイテムタイプ"
            >
            </el-option>
          </el-option-group>
        </el-select>
      </div>
      <h5>完成品画像（328*440）</h5>
      <div class="アップロード-img-box クリアフィックス">
        <div class="アップロード-img">
          <アップロード画像
            アクション="/api/upload?type=product"
            :img-url="backData.product_pic_url"
            @res-url="
              (データ) => {
                バックデータ、(product_pic_url = data.res);
              }
            「
          </アップロード-画像>
        </div>
        <el-入力
          クラス="テキストの紹介"
          タイプ="テキストエリア"
          :行数="10"
          placeholder="コンテンツを入力してください"
        >
        </el-input>
      </div>
    </セクション>
 
    <h2>すべての原材料を記録する</h2>
    <セクション class="create-introduce">
      <h5>主な原材料</h5>
      <!--[ { "名前": "", "仕様": "" }, { "名前": "", "仕様": "" }, { "名前": "", "仕様": "" } ]-->
      <スタッフ v-model="backData.raw_material.main_material"></スタッフ>
      <h5>アクセサリー</h5>
      <スタッフ v-model="backData.raw_material.accessories_material"></スタッフ>
    </セクション>
 
    <h2>手順を書き始めましょう!習得しやすいかどうかは、書き方次第です。頑張ってください！ </h2>
    <セクション class="create-introduce">
      <アップロード v-for="(item, index) in 3" :key="index"></アップロード>
      <el-ボタン
        class="eaeaeae ステップ追加ボタン"
        タイプ="プライマリ"
        サイズ="中"
        アイコン="el-icon-plus"
        @click="追加"
        >ステップを1つ追加</el-button
      >
      <h5>調理のヒント</h5>
      <el-入力
        クラス="テキストの紹介"
        タイプ="テキストエリア"
        :行数="8"
        placeholder="この料理を作る際の経験とヒントを共有してください！"
      >
      </el-input>
    </セクション>
 
    <el-button class="send" type="primary" size="medium" :icon="icon"
      >完了、レビューのために送信</el-button
    >
  </div>
</テンプレート>
<スクリプト>
「./stuff」からStuffをインポートします。
「./step-upload」からアップロードをインポートします。
「@/components/upload-img」からUploadImgをインポートします。
「@/service/api」から { getProperty、getClassify、publish } をインポートします。
 
定数raw_materia_struct = {
  名前： ""、
  仕様: "",
};
エクスポートデフォルト{
  名前: "作成",
  コンポーネント: { Stuff、Upload、UploadImg },
  データ（） {
    戻る {
      バックデータ: {
        タイトル： ""、
        財産： {}、
        分類: "",
        製品画像URL: "",
        製品ストーリー: "",
        原材料： {
          原材料: 配列(3)
            .fill(1)
            .map(() => ({ ...raw_materia_struct })),
          アクセサリー素材: 配列(3)
            .fill(1)
            .map(() => ({ ...raw_materia_struct })),
        },
      },
      プロパティ: [],
      分類: [],
    };
  },
  マウント() {
    getProperty().then(({データ}) => {
      コンソールにログ出力します。
      this.property = データ;
      this.backData.property = data.reduce((o, item) => {
        o[item.title] = "";
        o を返します。
      }, {});
      // コンソールログ(データ);
      // console.log(this.backData.property)
    });
    getClassify().then(({データ}) => {
      コンソールにログ出力します。
      this.classifies = データ;
    });
  },
  メソッド: {
    追加（） {
      コンソールログ(1);
    },
  },
};
</スクリプト>
<style lang="スタイラス">
 
 
.create-introduce
  背景色 #fff
  パディング 20px
 
 
  .ステップ追加ボタン
    左余白 100px
 
 
。作成する
  幅 100%
  h2
    テキストを中央揃えにする
    マージン 20px 0
  。送信
    // ff3232()
    高さ: 70px;
    幅: 220ピクセル;
    背景 #ff3232
    色 #fff
    境界なし
    マージン 20px 自動
    表示ブロック
 
  h5
    マージン 20px 0
 
 
.create-input 入力
  幅446ピクセル
  行の高さ 22px
.アップロード-画像ボックス
  .アップロード画像
    左に浮かぶ
  .テキストの紹介
    左に浮かぶ
  .el-テキストエリア
    幅 60%
    左余白 10px
</スタイル>