vue.js类似于购物车的点餐页面

Question

想用vue.js实现一个点单的前端功能。但是出现报错，百思不得其解，希望路过的大神帮忙指点：
HTML代码是这样的：

<div class="main">
            <div class="main_left">
                <ul class="menuList">
                    <li v-for="(site,index) in sites" v-on:click="chooesMenu(index,$event)" :class="{'activeList':Index===index}" >{{site.name}}</li>
                </ul>
            </div>
            <div class="main_right">
                <p class="title">{{menuTitle}}</p>
                <ul class="dishesList">
                    <li class="dishesOne" v-for="(dishe,index) in dishes">
                        <div class="dishImage"><img src="{{dishe.img}}" /> </div>
                        <div class="dishRight">
                            <p class="dishName">{{dishe.name}}</p>
                            <div class="dishBottom">
                                <div class="bottom_left">
                                    <p class="saleNum">月售{{dishe.saleNum}}</p>
                                    <p class="price">￥<span> {{dishe.price}}</span> </p>
                                </div>
                                <div class="add">
                                    <i class="iconfont icon-jiahao3 jiahao"  v-on:click="addDishes(index)"></i>
                                    <span class="num" :class="{'isVisible':ind===index}">{{dishe.num}}</span>
                                    
                                    <i class="iconfont icon-jianhao" :class="{'isVisible':ind===index}" @click="reduce(index)"></i>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

js : data部分：

data:{
            sites:[
                {name:"店长推荐"},
                {name:"精品咖啡"},
                {name:"中式套餐"},
                {name:"咖啡"},
                {name:"欧式餐点"},
                {name:"中式茶"},
                {name:"鲜榨果汁"},
                {name:"啤酒"},
                {name:"葡萄酒"}
            ],
            menuTitle:"店长推荐",
            isVisible:false,
            Index:0,
            ind:'',
            
            bigDishes:{"recommend":[
                {"img":"../kabuqinuo.jpg","name":"卡布奇诺","saleNum":"219","price":"29","num":"1"},
                {"img":"../kabuqinuo.jpg","name":"毅志咖啡","saleNum":"209","price":"32","num":"1"}
            ],
            "specile":[
                {"img":"../kabuqinuo.jpg","name":"卡布奇诺","saleNum":"219","price":"29","num":"1"},
                {"img":"../kabuqinuo.jpg","name":"卡布奇诺","saleNum":"219","price":"29","num":"1"},
                {"img":"../kabuqinuo.jpg","name":"哥伦比亚咖啡","saleNum":"119","price":"28","num":"1"}
            ],
            "chinesemeal":[
                {"img":"../kabuqinuo.jpg","name":"毅志咖啡","saleNum":"209","price":"32","num":"1"}
            ]
            }
        },

created 部分：

created:function(smallClassfy){
            //dishes = this.bigDishes.recommend;
            
            switch(smallClassfy){
                case 0: dishes = this.bigDishes.recommend;
                break;
                case 1: dishes = this.bigDishes.specile;
                break;
                case 2: dishes = this.bigDishes.chinesemeal;
                break;
            }
                
        },

methods部分主要有：

chooesMenu:function(index,event){
                this.Index=index;
                this.menuTitle = event.currentTarget.innerText;
                created(index);
            },

chooesMenu：表示点击左边小分类使右边切换。
实现的效果图：

大概是这样。但是现在代码这么写，整个页面都没有任何东西出来，错误信息截图如下：

麻烦大神指点指点，该怎么修改，才能使功能得以实现。

Answer 1

<li class="dishesOne" v-for="(dishe,index) in dishes"> 中 dishes 未定义，先在 data 里定义，created:function(smallClassfy){ 里赋值时改成 this.dishes =