这次给大家带来使用vue.js实现编辑菜谱，使用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,credentials: 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相同就打勾
<p class="modal-body">
<p class="scroll_name ">
<p class="newrecipe" style="overflow-y: scroll;height: 410px;">
<p v-for="item in foodlist" style="display: flex;flex-wrap: wrap;">
<label style="margin-right: 20px;">{{ item.name }}</label>
<p class="food-list">
<p v-for="food in item.cyfooddefinelist">
<label>
<input class="ace check_son" type="checkbox" :value="food.id" v-model="foodlistid">
<span class="lbl">{{ food.name }}</span>
</label>
</p>
</p>
</p>
</p>
</p>
</p>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
mpvue小程序markdown适配怎样实现
怎样高效的使用react服务器端渲染
以上就是使用vue.js实现编辑菜谱的详细内容。