1
私はVueを学習していて、自分で仕事を完了しようとしています。Vuejs - クリック時のv-forループの方法
@clickでv-forループを実行する方法を知りたいので、初期状態では「city」テンプレートのみが表示され、クリックごとに関連するツアーがレンダリングされます。
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>それは（関連している）2つのテンプレートを持っている、そして（デシベルとルータでこのモデルを接続することをお勧めがあれば、私は、また、当該技術分野の状態に興味を持っています都市/ツアーリスト）。あるいは、あなたはそのようなケースにどのようにアプローチしますか（私はjsfiddleが自明であるべきだと思います）。
私は親コンポーネントの子としてツアーを追加しようとしました [jsfiddle] IDで結果をフィルタリングする場所は、この方法がコンポーネントとフィルタリングの両方のアーキテクチャの面で優れたアプローチであるかどうかわかりません。
https://jsfiddle.net/oy5fdc0r/29/
ありがとうEric！答えはかなり説明的です。コンポーネントの構造についてどう思いますか？これは、ルータ＆アクシオのスパで動作する方法だと思いますか？ – mulsun