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.cookie的使用javascript
Apr 11 Javascript
Javascript之Date对象详解
Jun 07 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
Nov 21 Javascript
JS伪继承prototype实现方法示例
Jun 20 Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 Javascript
微信小程序-API接口安全详解
Jul 16 Javascript
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 Javascript
Vue使用NProgress进度条的方法
Sep 21 Javascript
微信小程序单选框自定义赋值
May 26 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
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
bootstrap 设置checkbox部分选中效果
2017/04/20 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
Javascript 之封装(Package)
2018/09/14 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
Python与shell的3种交互方式介绍
2015/04/11 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
Keras实现DenseNet结构操作
2020/07/06 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
基于python实现操作git过程代码解析
2020/07/27 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
如何转换一个字符串到enum值
2014/04/12 面试题
预备党员思想汇报
2014/01/08 职场文书
11月红领巾广播稿
2014/01/17 职场文书
优秀的个人求职信范文
2014/05/09 职场文书
完整版商业计划书
2014/09/15 职场文书
技术负责人岗位职责
2015/02/10 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书