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做一个简单的编辑菜谱功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Vue.js结合Ueditor富文本编辑器的实例代码

    在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器. 前一段时间公司Vue.js项目需要使用UEditor富文本编辑器,在百度上搜索一圈没有发现详细的说明,决定自己尝试,忙活了一天终于搞定了. 1. 总体思路 1.1 模块化 vue的很大的一个优势在于模块化,我们可以通过模块化实现页面和逻辑的复用.所以可以把Ueditor重新封装成一个.vue的模板文件.其他组件通过引入这个模板实现代码复用. 1.2 数据传输 首先父组件需要设置编辑器的长度.宽度.初始文本,这些数据可以通过prop

  • vue.js给动态绑定的radio列表做批量编辑的方法

    每个题目绑定的题目结构如下json对象,每次动态添加选项就是将其加入了vue实例的某个数组对象中: vm.options.push({ id: "", text: "新选项", checked: false }); 现在对radio或者checkbox集合列表进行批量添加,这里使用到了textarea容器. textare每一行都是一条数据,它的内部是根据回车来区分(break-word自动换行不算),每一行是一个对象,整体就是一个文本数组了,获取如下: var c

  • 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 = r

  • node.js做一个简单的爬虫案例教程

    准备工作 首先,你需要下载 nodejs,这个应该没啥问题吧 原文要求下载 webstrom,我电脑上本来就有,但其实不用下载,完全在命令行里面操作就行 创建工程 准备工作做完了,下面就开始创建工程了 首先,在你想要放资源的地方创建文件夹,比如我在 E 盘里面创建了一个 myStudyNodejs 的文件夹 在命令行里面进入你创建的文件夹 如图 进入 e 盘:E: 进入文件夹:cd myStudyNodejs(你创建的文件夹的名字) 注意全是英文符号 初始化项目,在你创建的文件夹下面运行 npm

  • 使用原生js编写一个简单的框选功能方法

    今天我们来聊一下怎么使用原生javascript编写一个简单的框选功能. 需求描述 鼠标左键按下不放,移动鼠标出现矩形选框: 鼠标左键松开,根据上边出现的矩形选框统计选框范围内的DOM元素: 嗯...上边的功能描述看着是挺简单的,但实现起来也还是会有些地方需要斟酌思考的.比如,如果我们的框选范围不是document.body,而是某一个div里边进行框选呢?而现实开发过程中,我们会遇上的应该就是第二种情况. 点击查看完整的源码 怎么实现 二话不说,咱们动手写代码吧!因为更好的兼容性,这里就避免了

  • 一步步教你用Vue.js创建一个组件(附代码示例)

    目录 前言 到底什么是组件? 为什么你一定要使用组件 在Vue中创建一个组件 模板部分 脚本部分 选项API:旧的方式 合成API:现在和未来 风格部分 总结 前言 Vue.js是一个渐进式框架,旨在以一种非常简单.直接的方式构建用户界面.它被设计成易于使用,并且足够灵活,可以处理各种各样的应用. 在本教程中,我们将向你展示如何用Vue.js创建一个简单的组件.我们还将介绍一些在使用组件时需要知道的基本概念. 我们将介绍在Vue中创建一个组件的基本语法,以及一些关于组件用途的理论.在这篇文章的最

  • Vue.js实现一个todo-list的上移下移删除功能

    如图,A simple todo-list长这样 这是一个基于vue.js的一个简单的todo-list小demo.首先要实现添加非空list,点击list切换finished状态这样的一个效果,推荐学习地址---->点击打开链接 接下来是实现的一个上移,下移,删除的效果图: 删除效果: 讲一下思路: 上移-----首先将鼠标所指list的内容插入到上一条上面,然后删除鼠标所指的list(也就是this.items[index]),运行代码便可实现上移的效果,或者将上下两条list的内容进行调换

  • 使用Vue.js和Element-UI做一个简单登录页面的实例

    最近了解到Vue.js挺火的,有同学已经学习了,那我心里痒痒的也学习了一点,然后也学了一点Element组件,就做了简单的登录页面. 效果很简单: 代码如下: 前端页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" hr

  • Vue做一个简单的随机点名册

    目录 布局部分: <div id="app"> <p>{{result}}</p> <button @click="randomName()">{{txt}}</button> </div> Vue部分: <script> let vm = new Vue({ el:'#app', data:{ list:["小一","李二","王三

  • 使用Vue.js创建一个时间跟踪的单页应用

    Vue.js很简单.正因为如此简单,人们常常认为其适合于小项目.虽然真正的Vue.js核心知识只是一个视图层库,实际上有一组工具,将使您能够使用Vue.js构建完整的大规模SPA(单页应用程序). SPA应用可以在不完全重新加载网页,产生一个更流畅的用户体验到的用户交互响应.还有好的副作用,SPA还鼓励后端专注于展示数据端点,这使得整体架构更加分离,并且对于其他类型的客户端可能是可重用的. 从开发人员的角度来看,SPA和传统的后端呈现应用程序之间的主要区别是,我们必须将客户端视为具有自己架构的应

  • js实现一个简单的MVVM框架示例

    以前都是默默地看园子里的文章,猥琐的点赞,今天也分享一下自己用js实现的一个简单mvvm框架. 最初只做了自动绑定事件,后面又参考学习了vue,knouckout以及argular实现方式,以及结合自己做WPF的一些经验,增加了属性绑定,今天又稍微整理了下,完善了部分功能,把代码提交到了码云:https://gitee.com/zlj_fy/Simple-MVVM 先简单介绍下用法: <form class="form-horizontal" role="form&qu

  • Vue+TailWindcss实现一个简单的闯关小游戏

    目录 游戏介绍 实现技术 本游特色 技术实现 初始化页面 小方块设置 主角移动 自动索敌 敌人移动 胜利与失败 编辑关卡 移入移出变色 点击设置 保存关卡 游戏介绍 这是一款2d益智闯关游戏,玩家须躲避敌人与陷阱到达终点 拥有多个关卡 可进行关卡的自定义并留存数据 实现技术 vue tailwindcss 本游特色 自定义关卡 敌人自动索敌 低技术力 you win! 技术实现 初始化页面 创建一个json文件,用来存放初始关卡的变量(只有一关...) 为方块设定大小,初始化变量speed设置为

随机推荐