快捷導(dǎo)航

vue.js做一個簡單的編輯菜譜功能

更新時間：2018年05月08日 10:32:26 作者：小達(dá)哥的垃圾桶

本文通過實例代碼給大家一個簡單的基于vue.js實現(xiàn)的編輯菜譜功能，代碼簡答易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧

先給大家展示下效果圖，如果感覺不錯，請參考實現(xiàn)代碼

1、先獲取門店下的所有菜品類型、菜品名稱、菜品id(list)，也就是最大數(shù)據(jù)量

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、獲取該菜譜已經(jīng)擁有(勾選了哪些)的菜品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對兩數(shù)據(jù)進(jìn)行對比，菜品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>

總結(jié)

以上所述是小編給大家介紹的vue.js做一個簡單的編輯菜譜功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

一文詳解Vue3中簡單diff算法的實現(xiàn)
這篇文章主要為大家詳細(xì)介紹Vue3中簡單diff算法的實現(xiàn)與使用，文中的示例代碼講解詳細(xì)，具有一定的借鑒價值，感興趣的可以了解一下
2022-09-09
利用Vue-cli搭建Vue項目框架的教程詳解
這篇文章主要為大家詳細(xì)介紹了利用Vue-cli搭建Vue項目框架的相關(guān)資料，對大家深入了解Vue有一定的幫助，感興趣的小伙伴可以了解一下
2023-02-02
前端H5微信支付寶支付實現(xiàn)方法(uniapp為例)
最近上線一個項目,手機(jī)網(wǎng)站進(jìn)行調(diào)起支付寶App支付,做起來還是滿順手的,在此做個記錄,這篇文章主要給大家介紹了關(guān)于前端H5微信支付寶支付實現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下
2024-04-04
你不知道的SpringBoot與Vue部署解決方案
這篇文章主要介紹了你不知道的SpringBoot與Vue部署解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
Vue看了就會的8個小技巧
這篇文章主要介紹了玩轉(zhuǎn)Vue的8個小技巧，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2021-01-01
vuex + keep-alive實現(xiàn)tab標(biāo)簽頁面緩存功能
這篇文章主要介紹了vuex + keep-alive實現(xiàn)tab標(biāo)簽頁面緩存功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-10-10
vue使用localStorage保存登錄信息適用于移動端、PC端
這篇文章主要為大家詳細(xì)介紹了vue使用localStorage保存登錄信息適用于移動端、PC端，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-05-05
elementUI同一頁面展示多個Dialog的實現(xiàn)
這篇文章主要介紹了elementUI同一頁面展示多個Dialog的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
Vue計算屬性與偵聽器和過濾器超詳細(xì)介紹
這篇文章主要介紹了Vue計算屬性與偵聽器和過濾器，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-10-10
mint-ui 時間插件使用及獲取選擇值的方法
下面小編就為大家分享一篇mint-ui 時間插件使用及獲取選擇值的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02