Realization of the complete menu of outstanding cuisine in vue project

Keywords: Vue.js elementUI

design sketch


1. First implement the recipe classification header

        (1) First, realize the home-made menu, Chinese cuisine and local snacks

        (2) Then realize each item in the first part

2. Implement the functions in the left filter

        (1) First realize the process, taste, difficulty and number of people

        (2) Implement each of the items included in the first step

Follow the steps

  Get the data asynchronously through the getClassify () method provided by the backend api, and then through the. then() method

Get the data, create an empty box, classify: [], and store the data in the array


  Then render the data to the page

This tab switch is a method encapsulated in the Element ui plug-in

Next, implement the data in each item in the title


Render data to page


Store classifyType:"1-1". Dynamically bind to is to splice secondary routes


  Then finish the above and go to the next step

         First realize the process, taste, difficulty and number of people

  Get data asynchronously through the getProperty () method provided by the back-end api, and then through the. then() method, just like the above implementation

Get the data, create an empty box properties: [], and store the data in the array



  This drop-down list is the method encapsulated in the Element ui plug-in

         Click expand

  Next, realize the data in each item of process, taste, difficulty and number of people


  Click to add color

Bind click event  

  Judge whether to click to cancel the deletion of the route in the address bar, and select it before clicking

$router.push() check the route and reverse the route


Judge whether there is data in the drop-down. If there is, it cannot be refreshed, and if not, it will be closed automatically

That's the basic effect

Overall code

    <div class="recipe">
        <!-- Recipe classification start -->
                v-for="item in classify"
                <div class="recipe-link">
                        v-for="option in item.list"
                        :class="{active:classifyType === option.type}"
        <!-- Recipe classification end -->
        <h2>Home style tastes good and gives you the warmth of your home</h2>
            <el-aside width="220px" class="recipe-aside">
                <div class="filter-box">
                    <el-collapse  v-model="propertyActiveName">
                            v-for="item in properties"
                            <div class="filter-tags">
                                <el-tag type="info"
                                    v-for="option in item.list"
                                    :class="{'tag-selected': propertyType[item.title] === option.type}"
    import MenuCard from '@/components/menu-card.vue'
    import {getClassify, getProperty, getMenus} from '@/service/api';
    export default {
        components: {MenuCard},
        data() {
            return {
                classify:[], //Store all data of tab switching
                classifyType:"1-1", //tab selected items for switching (secondary routing)
                classifyName:"1",//Define the value when refreshing the tab (Level 1 routing)

                properties:[],//Store all data in attributes
                propertyType:{},//Classification of storage properties
                propertyActiveName:[]  //Record all attribute classifications
        watch: {
            $route: {
                    const {classify} = this.$route.query;
                        this.classifyType = classify;//1-1
                        this.classifyName = classify[0]; //1
        mounted() {
                // console.log(data)
                this.classify = data;
                    this.classifyType = this.classify[0].list[0].type;//1-1
                    this.classifyName = this.classify[0].parent_type; //1
                            classify: this.classifyType,
                // console.log(data);
       = data;
                const {query} = this.$route;
                this.propertyType =,item)=>{
                    //  item.title: craft, difficulty, taste, number of people
                    o[item.title] = query[item.title] ? query[item.title]: "";
                    return o;
        methods: {
                let query = {...this.$route.query};
                //Judge whether to click. If yes, cancel. Otherwise, select
                if(this.propertyType[option.title] === option.type){
                    this.propertyType[option.title] = "";
                    delete query[option.title];
                    this.propertyType[option.title] = option.type;
                    query[option.title] = option.type;
<style lang="stylus">
        font-size 0;
        margin-top 5px

            display inline-block
            font-size 12px
            padding 0px 8px
            height 28px
            line-height 28px

            background #ff3232
            color #fff

            text-align center
            line-height 150px

            padding 0

            background #fff
            padding 10px
            width 100%
            float left
            box-sizing border-box

        display flex
        flex-wrap wrap
        justify-content space-around

            background-color #ff3232 !important
            color #fff !important

        width 100%
        text-align center
        font-size 20px


        To understand the analysis, in fact, the implementation effects of the upper and lower sides are the same. They are all through the data provided by the back end. After obtaining the data, they are rendered to the page, and then the effect is realized step by step

Posted by sanu on Sun, 10 Oct 2021 03:19:16 -0700