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学习笔记二 实现可编辑的表格
Apr 09 Javascript
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
Jul 12 Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 Javascript
vue实现简单图片上传
Jun 30 Javascript
vue自定义指令和动态路由实现权限控制
Aug 28 Javascript
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
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
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
smarty模板中使用get、post、request、cookies、session变量的方法
2014/04/24 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
Javascript this 的一些学习总结
2012/08/31 Javascript
jQuery实现图片文字淡入淡出效果
2015/12/21 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
2018/09/28 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
使用python为mysql实现restful接口
2018/01/05 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
详解用Pytest+Allure生成漂亮的HTML图形化测试报告
2020/03/31 Python
关于Python解包知识点总结
2020/05/05 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
信息管理专业学生自荐信格式
2013/09/22 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
遗失说明具结保证书
2015/02/26 职场文书
努力学习保证书
2015/02/26 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
民事代理词范文
2015/05/25 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
运动会宣传稿100字
2015/07/23 职场文书
pytorch 6 batch_train 批训练操作
2021/05/28 Python
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers