1
我學習Vue公司，並試圖完成一項任務自己循環。Vuejs - 如何爲v-上點擊
我想找出如何使在初始狀態下，只出現「城市」模板，並在每次點擊運行V-對@單擊循環，旅遊模板處理與相關之旅。
let EventBus = new Vue();
Vue.component('cities', {
\t name: 'Listings',
\t props: ['city','tour'],
\t
\t template: `
\t <div>
\t <div class='city-list box'>
\t <city v-for='city in cities' :id='city.id' :key='city.id' :city='city' :tour='tour' @click.native='select(city)'></city>
\t </div>
\t <div class='tour-list box'>
\t <tours v-for='tour in filter(tours)' :id='tour.id' :key='tour.id' :tour='tour'></tours>
\t </div>
\t </div>
\t `,
\t data() {
\t \t return {
\t \t \t cities: [
\t \t \t {id:1, name: 'Istanbul'},
\t \t \t {id:2, name: 'Paris'},
\t \t \t {id:3, name: 'Barça'},
\t \t \t {id:4, name: 'Rome'},
\t \t \t {id:5, name: 'Mars'}
\t \t \t ],
\t \t \t tours: [
\t \t \t {id:1, cid:1, name: 'Bosphorus'},
\t \t \t {id:2, cid:2, name: 'Eiffel'},
\t \t \t {id:3, cid:3, name: 'La Sagrada Familia'},
\t \t \t {id:4, cid:4, name: 'Colosseum'},
\t \t \t {id:5, cid:5, name: 'Mars Canyon'},
\t \t \t {id:6, cid:1, name: 'Sultanahmet'},
\t \t \t {id:7, cid:2, name: 'Champs-Élysées'},
\t \t \t {id:8, cid:3, name: 'Casa Mila'},
\t \t \t {id:9, cid:4, name: 'Trevi Fountain'},
\t \t \t {id:10, cid:5, name: 'Mars Desert'},
\t \t \t ]
\t \t };
\t },
\t methods: {
\t \t select(city) {
\t \t \t console.log('select');
\t \t \t EventBus.$emit('filter', city);
\t \t },
\t \t filter(tours) {
\t \t \t console.log('filter');
\t \t \t EventBus.$on('select',()=>{
\t \t \t cid = this.city.id;
\t \t \t return tours.filter(function(tour) {
\t \t \t \t return tour.cid == cid;
\t \t \t });
\t \t });
\t \t },
\t },
\t components: {
\t \t 'city': {
\t \t \t name: 'City',
\t \t \t props: ['city'],
\t \t \t template: `
\t \t \t <div :id="[city.name.toLowerCase()]" :class="[city.name.toLowerCase()]">
\t \t \t <h1>{{ city.name }}</h1>
\t \t \t </div>`
\t \t },
\t \t 'tour': {
\t \t \t name: 'Tour',
\t \t \t props: ['city', 'tour'],
\t \t \t template: `
\t \t \t <div :class="['tour-' + tour.id]" :id="[city.name.toLowerCase() + '-tours']" :refs="city.id" :data-id="city.id">
\t \t \t {{ tour.name }}
\t \t \t </div>
\t \t \t `,
\t \t },
\t },
});
new Vue({
\t el: '#root'
});\t body {
\t \t font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
\t }
\t .box {
\t \t margin: 48px auto;
\t \t max-width: 1024px;
\t \t display: flex;
\t \t justify-content: center;
\t \t align-items: center;
\t }
\t .box h1 {
\t \t font-size: 1.1rem;
\t \t color: #41f;
\t }
\t .box > div {
\t \t padding: 24px;
\t \t margin: 12px;
\t \t width: 20%;
\t \t min-height: 100px;
\t \t border-radius: 2px;
\t \t font-size: 1.15rem;
\t \t line-height: 1;
\t }
\t .box > div:nth-child(1)
\t {background-color: #ffb3ba;}
\t .box > div:nth-child(2)
\t {background-color: #ffdfba;}
\t .box > div:nth-child(3)
\t {background-color: #ffffba;}
\t .box > div:nth-child(4)
\t {background-color: #baffc9;}
\t .box > div:nth-child(5)
\t {background-color: #bae1ff;}<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
\t <div id="root">
\t \t <cities></cities>
\t </div>我也有興趣在藝術的狀態，如果它是一個很好的做法，有兩個模板一起（這是有關），並用DB和路由器連接這模型（城市/旅遊列表）。或者，你將如何接近到這種情況（我猜的jsfiddle應該是不言而喻的）。
作爲一個側面說明，我已經嘗試添加巡視作爲父組件 [jsfiddle]，其中我通過ID篩選結果，我不確定這種方式是否是一種更好的方法，既適用於構件意義上的組件和過濾結果。
https://jsfiddle.net/oy5fdc0r/29/
感謝埃裏克！答案很明顯。你如何看待組件結構？你認爲這是一個路要走即路由器與愛可信爲溫泉的工作？ – mulsun