本文通过实例代码给大家一个简单的基于vue.js实现的编辑菜谱功能，代码简答易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧
先给大家展示下效果图，如果感觉不错，请参考实现代码
1、先获取门店下的所有菜品类型、菜品名称、菜品id(list)，也就是最大数据量
this.$http.post(ceshiApi+'getCyFoodAndFoodTypeForShopId',{shopId:this.shopId},{emulateJSON:true,credentials: true}).then(function(res){ if(res.data.type=='success'){ this.foodList = res.data.data.cyFoodTypeList; } });
2、获取该菜谱已经拥有(勾选了哪些)的菜品id(list)
this.$http.post(ceshiApi+'getCyMenuFoodByMenuId',{'cyMenuId': id},{emulateJSON:true,cr<p style="color:transparent">本文来源gao!%daima.com搞$代*!码网1</p>edentials: true}).then(function(res){ if(res.data.type=='success'){ let data = res.data.data; let list = []; for(let i = 0; i <data.length; i++) { list.push(data[i].foodDefineId); } this.foodListId = list; }else { alertErrors(res.data.message); } });
3、在html页面使用vue对两数据进行对比，菜品id相同就打勾
<div class="modal-body"> <div class="scroll_name"> <div class="newRecipe" style="height: 410px"> <div> <label style="margin-right: 20px">{{ item.name }}</label><div class="food-list"> <div> <label> <span class="lbl">{{ food.name }}</span></label></div></div></div></div></div></div>
总结
以上就是vue.js做一个简单的编辑菜谱功能的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue.js做一个简单的编辑菜谱功能
转载请注明原文链接：vue.js做一个简单的编辑菜谱功能
