Vuejs - 클릭 시 v-for 루프 방법

Vuejs - 클릭 시 v-for 루프 방법

나는 Vue를 배우고 있고 내가 직접 과제를 완성하려고 노력하고 있다.

@click에서 v-for loop을 실행하는 방법을 알아보고 싶다. 그러면 초기 상태에서는 "city" 템플릿만 나타나고 클릭할 때마다 투어 템플릿이 관련 투어와 함께 렌더링된다.

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>

(관련된) 두 개의 템플릿을 함께 가지고, 이 모델을 db와 라우터(도시/관광 목록)로 연결하는 것이 좋은 연습이라면 예술의 상태에도 관심이 있다.아니면 그런 경우에 어떻게 접근하겠는가(jsfiddle은 스스로 해명해야 한다고 생각한다).

참고로 나는 아이로서 부모 구성요소 [jsfiddle]에 투어를 추가해 보았는데, 여기서 ID로 결과를 필터링하는 것이 아키텍처의 의미에서의 구성요소 및 필터링 결과 모두에 대해 이 방법이 더 나은 접근법인지 잘 모르겠다.

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

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

이벤트 버스 대신 선택한 도시를 추적하려면 데이터 속성을 사용하십시오.그런 다음 계산된 속성을 사용하여 선택한 도시를 기준으로 올바른 투어를 표시할 수 있다.

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

참조URL: https://stackoverflow.com/questions/46635321/vuejs-how-to-v-for-loop-on-click