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 ul标签下拉菜单演示代码
Dec 11 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
原生javascript实现图片弹窗交互效果
Jan 12 Javascript
js检测判断日期大于多少天的方法
May 04 Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 Javascript
jQuery+css实现炫目的动态块漂移效果
Jan 28 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
js实现贪吃蛇小游戏
Oct 29 Javascript
微信小程序弹窗禁止页面滚动的实现代码
Dec 30 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的error_reporting错误级别变量对照表
2014/07/08 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
Zend Framework数据库操作技巧总结
2017/02/18 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
2014/04/04 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
JavaScript获取当前cpu使用率的方法
2015/12/15 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
详解Python编程中基本的数学计算使用
2016/02/04 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
编辑找工作求职信范文
2013/12/16 职场文书
面试后感谢信
2014/02/01 职场文书
成绩单公证书
2014/04/10 职场文书
三方合作协议书范本
2014/04/18 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
安全生产标语口号
2015/12/26 职场文书
Golang中异常处理机制详解
2021/06/08 Golang