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 相关文章推荐
jQuery使用手册之 事件处理
Mar 24 Javascript
浅析jQuery中常用的元素查找方法总结
Jul 04 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
老生常谈Bootstrap媒体对象
Jul 06 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
Sep 29 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
关于vue的语法规则检测报错问题的解决
May 21 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
vue element upload组件 file-list的动态绑定实现
Oct 11 Javascript
原生JS实现贪吃蛇小游戏
Mar 09 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分页代码学习示例分享
2014/02/20 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
JavaScript实现经典排序算法之冒泡排序
2016/12/28 Javascript
Angularjs 动态改变title标题(兼容ios)
2016/12/29 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
[42:32]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第二局
2016/02/27 DOTA
Python实现基于权重的随机数2种方法
2015/04/28 Python
Python 基础知识之字符串处理
2017/01/06 Python
用Python设计一个经典小游戏
2017/05/15 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
python迭代dict的key和value的方法
2018/07/06 Python
python连接mongodb密码认证实例
2018/10/16 Python
Python开发网站目录扫描器的实现
2019/02/21 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
校园之星获奖感言
2014/01/29 职场文书
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
公司外出活动方案
2014/08/14 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
2015年关爱留守儿童工作总结
2015/05/22 职场文书
2019入党申请书格式
2019/06/25 职场文书
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android