Vue implements small form validation function

import Create from "@/views/create/create.vue";

//The first letter of the exposed name should be capitalized. The following is the directory where your form page is located @ is the abbreviation of .., which means returning to the previous level const router = new Router ({
mode:"history"//This is the route mode. routes:[
{
      path: "/create", //Default is /. If there are multiple paths, it is / plus the path name: "create",
      component: Create,
      title: "Form",
    },
]
})

<router-link :to="{ name: 'create' }" class="collection">Form</router-link>

<template>
  <div class="create">
    <h2>Welcome to publish a new recipe, please introduce your masterpiece first! </h2>
    <section class="create-introduce">
      <h5>Title</h5>
 
      <el-input
        v-model="backData.title"
        class="create-input"
        placeholder="Please enter content"
      ></el-input>
      <h5>Attributes</h5>
      <div>
        <el-select
          v-for="item in propertyies"
          :key="item.parent_name"
          :placeholder="item.parent_name"
          v-model="backData.property[item.title]"
        >
          <el-option
            v-for="option in item.list"
            :key="option.type"
            :label="option.name"
            :value="option.type"
          >
          </el-option>
        </el-select>
      </div>
      <h5>Recipe Categories</h5>
      <div>
        <el-select placeholder="Please select the recipe category" v-model="backData.classify">
          <el-option-group
            v-for="group in classifies"
            :key="group.parent_type"
            :label="group.parent_name"
          >
            <el-option
              v-for="item in group.list"
              :key="item.type"
              :label="item.name"
              :value="item.type"
            >
            </el-option>
          </el-option-group>
        </el-select>
      </div>
      <h5>Finished product picture (328*440)</h5>
      <div class="upload-img-box clearfix">
        <div class="upload-img">
          <upload-img
            action="/api/upload?type=product"
            :img-url="backData.product_pic_url"
            @res-url="
              (data) => {
                backData, (product_pic_url = data.res);
              }
            "
          ></upload-img>
        </div>
        <el-input
          class="introduce-text"
          type="textarea"
          :rows="10"
          placeholder="Please enter content"
        >
        </el-input>
      </div>
    </section>
 
    <h2>Record all raw materials</h2>
    <section class="create-introduce">
      <h5>Main ingredients</h5>
      <!--[ { "name": "", "specs": "" }, { "name": "", "specs": "" }, { "name": "", "specs": "" } ]-->
      <Stuff v-model="backData.raw_material.main_material"></Stuff>
      <h5>Accessories</h5>
      <Stuff v-model="backData.raw_material.accessories_material"></Stuff>
    </section>
 
    <h2>Start writing the steps! Whether it is easy to learn depends on how you write it. Good luck! </h2>
    <section class="create-introduce">
      <Upload v-for="(item, index) in 3" :key="index"></Upload>
      <el-button
        class="eaeaea add-step-button"
        type="primary"
        size="medium"
        icon="el-icon-plus"
        @click="add"
        >Add one step</el-button
      >
      <h5>Cooking tips</h5>
      <el-input
        class="introduce-text"
        type="textarea"
        :rows="8"
        placeholder="Share your experience and tips in making this dish!"
      >
      </el-input>
    </section>
 
    <el-button class="send" type="primary" size="medium" :icon="icon"
      >Done, submit for review</el-button
    >
  </div>
</template>
<script>
import Stuff from "./stuff";
import Upload from "./step-upload";
import UploadImg from "@/components/upload-img";
import { getProperty, getClassify, publish } from "@/service/api";
 
const raw_materia_struct = {
  name: "",
  specs: "",
};
export default {
  name: "create",
  components: { Stuff, Upload, UploadImg },
  data() {
    return {
      backData: {
        title: "",
        property: {},
        classify: "",
        product_pic_url: "",
        product_story: "",
        raw_material: {
          raw_material: Array(3)
            .fill(1)
            .map(() => ({ ...raw_materia_struct })),
          accessories_material: Array(3)
            .fill(1)
            .map(() => ({ ...raw_materia_struct })),
        },
      },
      propertyies: [],
      classifies: [],
    };
  },
  mounted() {
    getProperty().then(({ data }) => {
      console.log(data);
      this.propertyies = data;
      this.backData.property = data.reduce((o, item) => {
        o[item.title] = "";
        return o;
      }, {});
      // console.log(data);
      // console.log(this.backData.property)
    });
    getClassify().then(({ data }) => {
      console.log(data);
      this.classifies = data;
    });
  },
  methods: {
    add() {
      console.log(1);
    },
  },
};
</script>
<style lang="stylus">
 
 
.create-introduce
  background-color #fff
  padding 20px
 
 
  .add-step-button
    margin-left 100px
 
 
.create
  width 100%
  h2
    text-align center
    margin 20px 0
  .send
    // ff3232()
    height: 70px;
    width: 220px;
    background #ff3232
    color #fff
    border none
    margin 20px auto
    display block
 
  h5
    margin 20px 0
 
 
.create-input input
  width 446px
  line-height 22px
.upload-img-box
  .upload-img
    float left
  .introduce-text
    float left
  .el-textarea
    width 60%
    margin-left 10px
</style>