vue.js做一个简单的编辑菜谱功能

先给大家展示下效果图,如果感觉不错,请参考实现代码

1、先获取门店下的所有菜品类型、菜品名称、菜品id(list),也就是最大数据量

rush:js;"> 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)

rush:js;"> this.$http.post(ceshiApi+'getCyMenuFoodByMenuId',{'cyMenuId': id},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相同就打勾

rush:js;">

总结

以上所述是小编给大家介绍的vue.js做一个简单的编辑菜谱功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

vue.js编辑菜谱

相关文章

可以通过min-width属性来设置el-table-column的最小宽度。以...
yarn dev,当文件变动后,会自动重启。 yanr start不会自动重...
ref 用于创建一个对值的响应式引用。这个值可以是原始值(如...
通过修改 getWK005 函数来实现这一点。这里的 query 参数就是...
&lt;el-form-item label=&quot;入库类型&quot; ...
API 变动 样式类名变化: 一些组件的样式类名有所变动,可能需...