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 相关文章推荐
javascript开发技术大全-第1章javascript概述
Jul 03 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
js特殊字符转义介绍
Nov 05 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 Javascript
浅析Bootstrap组件之面板组件
May 04 Javascript
JQuery实现图片轮播效果
May 08 jQuery
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
Vuex的初探与实战小结
Nov 26 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 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
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
摘自启点的main.js
2008/04/20 Javascript
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
2010/01/22 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
JavaScript模拟push
2016/03/06 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
2016/05/19 Javascript
基于vue的下拉刷新指令和滚动刷新指令
2016/12/23 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
python中的字典操作及字典函数
2018/01/03 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
Swisse官方海外旗舰店:澳大利亚销量领先,自然健康品牌
2017/12/15 全球购物
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
西安交大自主招生自荐信
2014/01/27 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
2016小学新学期寄语
2015/12/04 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
Win2008系统搭建DHCP服务器
2022/06/25 Servers