首页 > 其他分享> 文章详细

美食杰—发布菜谱

2021-09-26 20:29:53 阅读：187 来源： 互联网

标签：... struct 菜谱 material raw 发布美食 Array data

我又来了！

先看效果：

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

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

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

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

我依然用的是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:讲真的快看看父子组件传参吧！！

冲冲冲！！

标签：...,struct,菜谱,material,raw,发布,美食,Array,data
来源： https://blog.csdn.net/oo_ring/article/details/120495492

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

美食杰—发布菜谱