美食杰—发布菜谱

我又来了！

先看效果：

 数据是后端请求的，所以不是简单的下拉选项框

 填入主料和辅料，也可以增加。

 

当删除到只剩一项时，删除键隐藏。

来了来了来了，代码来了。

我依然用的是Element UI 框架，下拉选项框绑定v-model事件

删除和增加绑定点击事件

<h5>属性</h5>
      <div>
        <el-select
        v-for="item in propertyies"
        :key="item.parent_type"
        :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>菜谱分类</h5>
      <div>
        <el-select placeholder="请选择菜谱分类"
          v-model="backData.classify">
          <el-option-group
          v-for="group in classifyies"
          :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>
<!--做饭所需材料记录-->
<!--主料，辅料-->
<h2>记录所有原材料</h2>
    <section class="create-introduce">
      <h5>主料</h5>
      <!--[ { "name": "", "specs": "" }, { "name": "", "specs": "" }, { "name": "", "specs": "" } ]-->
      <Stuff 
        v-model="backData.raw_material.main_material"
      ></Stuff>
      <h5>辅料</h5>
      <!-- 组件通信使用v-model会监听  在组件上双向绑定value发布事件input -->
      <Stuff 
        v-model="backData.raw_material.accessories_material"
      ></Stuff>
    </section>
<!--Stuff组件中的内容-->
<div class="stuff">
    <div class="clearfix">
      <div class="raw-item"
      v-for="(item,index) in value"
      :key="index">
        <el-input v-model="item.name" placeholder="请输入内容" style="width: 200px" ></el-input>
        <el-input v-model="item.specs" placeholder="请输入内容" style="width: 100px" ></el-input>
        <i class="delete-icon el-icon-close" v-show="value.length!==1" @click="remove(index)"></i>
      </div>
    </div>
    <el-button  @click="add" class="eaeaea" type="primary" size="medium" icon="el-icon-plus">增加一项</el-button>
  </div>

 在js中向后端发送请求。

结构

// 向后端发送的数据结构
const backData = {
  title: "", // 标题
  product_pic_url: "", // 成品图URL
  product_story: "", // 成品图故事
  property: {
    craft: 0, // 工艺 enum: [1,2,3,4],
    flavor: 0, // 口味  enum: [1,2,3,4],
    hard: 0, // 难度 enum: [1,2,3,4],
    pepole: 0, // pepole 人数: [1,2,3,4],
  }, // 属性
  raw_material: {
    // 料
    main_material: [{ name: "", specs: "" }], // 主料
    accessories_material: [{ name: "", specs: "" }], // 辅料
  },
  steps: [{ img_url: "", describe: "" }], // 步骤
  classify: "", // 菜谱分类
  skill: "",
};

向后端发送请求 

data() {
    return {
      // 向后端发送请求
      backData: {
        title: "",
        property: {},
        classify:"",
        product_pic_url: "", 
        product_story: "", 
        raw_material: {
          main_material: Array(3).fill(1).map(()=>({...raw_material_struct})), 
          accessories_material: Array(3).fill(1).map(()=>({...raw_material_struct})), 
        }
      },
      propertyies: [],
      classifyies:[]
    };
  },

main_material: Array(3).fill(1).map(()=>({...raw_material_struct})), 
accessories_material: Array(3).fill(1).map(()=>({...raw_material_struct}))

这里用了数组方法，相当于手动写三个数据。

写入下拉选项框的方法，渲染数据

mounted() {
    getProperty().then(({ data }) => {
      console.log(data);
      this.propertyies = data;
      this.backData.property = data.reduce((o,item) => {
        o[item.title] = ""; //新建一个空的，把原有(data中的)的一个一个加进去
        return o;
      },{});
    });
    
    getClassify().then(({data})=>{
      this.classifyies=data

    })
  },
  methods: {},
}

添加主料和辅料方法

// v-model 在组件上面双向绑定 value 发布事件input 
export default {
  props: {
    value:{
      type:Array,
      default:()=>[]
    }
  },
  methods:{
    add(){
      this.$emit('input',[
        ...this.value,
        {"name":'',"spacs":''}
      ]);
    },
    remove(index){
      const newValue=this.value.filter((item,i)=>{
        return i !== index//下标不等于选中的
      });
      this.$emit("input",newValue)
    }
  }
}

PS:讲真的快看看父子组件传参吧！！

冲冲冲！！