Vue list循环时 点击当前元素显示相应的详细内容

列表循环

	<ul>
		<li v-for="(good,index) in goods" :key="good.id"class="food-list-hook">
			<div class="class-title">
				{{good.class}}
			</div>
			<div v-for="(good,indexs) in good.list" :key="good.id"  >
				<div class="item"  @click="selectGood($event,good)">
					<div class="item-self">
						<div class="title">
							{{good.name}}
						</div>
						<div class="price">
							<i class="fa fa-cny"></i>
							<span class="redtext">
								{{good.price}}
							</span>
						</div>
					</div>
				</div>
			</div>
		</li>
	</ul>

显示的内容

<div class="menu" :food="selectedFood">
	<div class="menu-img">
		<img :src="selectedFood.img" alt=""/>
	</div>
	<div class="menu-con">
		<div class="title">
			{{selectedFood.name}}
		</div>
		<div class="price">
			<i class="fa fa-cny"></i>
			<span class="redtext">
				{{selectedFood.price}}
			</span>
		</div>
		<div class="destitle">
			{{selectedFood.int}}
		</div>
	</div>
</div>

点击获取并放入数据

new Vue({
	el: '#app',
	data (){
	    return{
      	    goods: [],
	 	    selectedFood: {}    //设置显示的数组
    }
  },
	methods: {
    	selectFood($event,food){
			this.selectedFood = food;    //将当前点击的数据放入显示数组

			console.log(food)
      },
    }
})