此片用于学习笔记总结,仅供用于开发拓展思维
发布菜谱的重点:
1: 页面中展示的数据;
2: 用户产生的数据怎么处理;
展示的数据都是从后端请求过来的,用于给用户一些提示信息跟选项,用户选择的数据要收集起来发送给后端;
知识点:1. 双向数据绑定
接口文档内的内容(方便赋值):
标题部分 定义一个函数:接收值
使用v-model绑定到input中
<h5>标题</h5>
<el-input v-model='backData.title' class="create-input" placeholder="请输入内容"></el-input>
data(){
return {
backData:{
title:'',
property: {
},
classify:'',
product_pic_url: '', // 成品图URL
product_story: '', // 成品图故事
raw_material: { // 料
//操作数组的方法
main_material: Array(5).fill(1).map(()=>({...raw_material_struct})), // 主料
accessories_material: Array(3).fill(1).map(()=>({...raw_material_struct})), // 辅料
// main_material:[{name:"",specs:""},{name:"",specs:""},{name:"",specs:""}],
// accessories_material:[{name:"",specs:""},{name:"",specs:""},{name:"",specs:""}]
},
},
propertyies:[],
classifies:[]
}
}
分类部分:定义切换的值;思路:看需求;
把property定义赋值内容:
上面组件进行赋值:
<h5>属性</h5>
<div>
<el-select
v-for="item in propertyies"
:key="item.parent_type"
:placeholder='item.parent_name'
v-m