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


Posted in Javascript onMay 08, 2018

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

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相同就打勾

<div class="modal-body">
  <div class="scroll_name ">
    <div class="newRecipe" style="overflow-y: scroll;height: 410px;">
      <div v-for="item in foodList" style="display: flex;flex-wrap: wrap;">
        <label style="margin-right: 20px;">{{ item.name }}</label>
        <div class="food-list">
          <div 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>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

总结

以上所述是小编给大家介绍的vue.js做一个简单的编辑菜谱功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
由document.body和document.documentElement想到的
Apr 13 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
VUE中使用Vue-resource完成交互
Jul 21 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
js防抖和节流的深入讲解
Dec 06 Javascript
js模拟F11页面全屏显示
Sep 17 Javascript
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
node中使用shell脚本的方法步骤
Mar 23 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 #Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 #Javascript
webstorm添加*.vue文件支持
May 08 #Javascript
浅谈vue项目如何打包扔向服务器
May 08 #Javascript
Javascript实现购物车功能的详细代码
May 08 #Javascript
vue-cli 如何打包上线的方法示例
May 08 #Javascript
使用vue-cli打包过程中的步骤以及问题的解决
May 08 #Javascript
You might like
php代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
JavaScript 事件参考手册
2008/12/24 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
详解基于Vue/React项目的移动端适配方案
2019/08/23 Javascript
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
python多线程http压力测试脚本
2019/06/25 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
详解django中Template语言
2020/02/22 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
蔻驰英国官网:COACH英国
2020/07/19 全球购物
PHP面试题附答案
2015/11/28 面试题
VC++笔试题
2014/10/13 面试题
全陪导游欢迎词
2014/01/17 职场文书
《掌声》教学反思
2014/02/23 职场文书
租房协议书
2014/04/10 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
作息时间调整通知
2015/04/22 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python