How to use vue.js to edit recipes

This time I will show you how to use vue.js to create the recipe editing function. What are the precautions for using vue.js to create the recipe editing function? The following is a practical case. Let’s take a look. .

1. First get all the dish types, dish names, and dish ids (list) under the store, which is the maximum amount of data

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. Get the dish IDs (list) that the recipe already has (which ones are checked)

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. Use vue on the html page to compare the two data. If the dish IDs are the same, click Hook

<p class="modal-body">
  <p class="scroll_name ">
    <p class="newRecipe" style="overflow-y: scroll;height: 410px;">
      <p v-for="item in foodList" style="display: flex;flex-wrap: wrap;">
        <label style="margin-right: 20px;">{{ item.name }}</label>
        <p class="food-list">
          <p 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>
          </p>
        </p>
      </p>
    </p>
  </p>
</p>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use JS to calculate pi to 100 decimal places

How to use vue axios for production Configure the interface address with the release environment

The above is the detailed content of How to use vue.js to edit recipes. For more information, please follow other related articles on the PHP Chinese website!