Vuejs - 如何在点击时进行 v-for 循环

Posted 2023-02-23

【中文标题】Vuejs - 如何在点击时进行 v-for 循环

【英文标题】：Vuejs - How to v-for loop on click

【发布时间】：2018-03-20 00:09:05

【问题描述】：

我正在学习 Vue 并尝试自己完成一项任务。

我想了解如何在 @click 上运行 v-for 循环，以便在初始状态下，只出现“城市”模板，并且在每次点击时，旅游模板都会呈现相关的旅游。

let EventBus = new Vue();
Vue.component('cities', 

	name: 'Listings',
	props: ['city','tour'],
	
	template: `
	<div>
	<div class='city-list box'>
	<city v-for='city in cities' :id='city.id' :key='city.id' :city='city' :tour='tour' @click.native='select(city)'></city>
	</div>
	<div class='tour-list box'>
	<tours v-for='tour in filter(tours)' :id='tour.id' :key='tour.id' :tour='tour'></tours>
	</div>
	</div>
	`,

	data() 
		return 

			cities: [
			id:1, name: 'Istanbul',
			id:2, name: 'Paris',
			id:3, name: 'Barça',
			id:4, name: 'Rome',
			id:5, name: 'Mars'
			],

			tours: [
			id:1, cid:1, name: 'Bosphorus',
			id:2, cid:2, name: 'Eiffel',
			id:3, cid:3, name: 'La Sagrada Familia',
			id:4, cid:4, name: 'Colosseum',
			id:5, cid:5, name: 'Mars Canyon',
			id:6, cid:1, name: 'Sultanahmet',
			id:7, cid:2, name: 'Champs-Élysées',
			id:8, cid:3, name: 'Casa Mila',
			id:9, cid:4, name: 'Trevi Fountain',
			id:10, cid:5, name: 'Mars Desert',
			]
		;
	,

	methods: 
		select(city) 
			console.log('select');
			EventBus.$emit('filter', city);
		,

		filter(tours) 
			console.log('filter');
			EventBus.$on('select', ()=>
			cid = this.city.id;
			return tours.filter(function(tour) 
				return tour.cid == cid;
			);
		);
		,
	,

	components: 

		'city': 
			name: 'City',
			props: ['city'],
			template: `
			<div :id="[city.name.toLowerCase()]" :class="[city.name.toLowerCase()]">
			<h1> city.name </h1>
			</div>`
		,

		'tour': 
			name: 'Tour',
			props: ['city', 'tour'],
			template: `
			<div :class="['tour-' + tour.id]" :id="[city.name.toLowerCase() + '-tours']" :refs="city.id" :data-id="city.id">
			 tour.name 
			</div>
			`,
		,
	,

);

new Vue(
	el: '#root'
);

	body 
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	
	.box 
		margin: 48px auto;
		max-width: 1024px;
		display: flex;
		justify-content: center;
		align-items: center;
	
	.box h1 
		font-size: 1.1rem;
		color: #41f;
	
	.box > div 
		padding: 24px;
		margin: 12px;
		width: 20%;
		min-height: 100px;
		border-radius: 2px;
		font-size: 1.15rem;
		line-height: 1;
	

	.box > div:nth-child(1)
	background-color: #ffb3ba;
	.box > div:nth-child(2)
	background-color: #ffdfba;
	.box > div:nth-child(3)
	background-color: #ffffba;
	.box > div:nth-child(4)
	background-color: #baffc9;
	.box > div:nth-child(5)
	background-color: #bae1ff;

<script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script>
	<div id="root">
		<cities></cities>
	</div>

我也对最先进的技术感兴趣，如果将两个模板放在一起（它们是相关的）是一个好习惯，并将这个模型与数据库和路由器（城市/旅游列表）连接起来。或者您将如何处理这种情况（我猜 jsfiddle 应该是不言自明的）。

作为旁注，我尝试将小时候的游览添加到父组件 [jsfiddle]，在其中我按 ID 过滤结果，我不确定这种方式对于组件和过滤结果在架构意义上是否都是更好的方法.

https://jsfiddle.net/oy5fdc0r/29/

【参考方案1】：

https://jsfiddle.net/oy5fdc0r/30/

使用数据属性来跟踪所选城市，而不是使用 Eventbus。然后，您可以使用计算属性根据所选城市显示正确的游览。

computed:
      selectedTours()
          return this.tours.filter(tour=>tour.cid == this.selectedCity.id)
      
  ,
    methods: 
        select(city) 
            this.selectedCity = city;
        ,
    ,