Vue.js-使用列表生成导航栏和控制主要内容的复选框行

Question

我从Vue开始，如果可能的话，我想要一个小的启动。我将创建一个页面，它有三个主要元素，全部来自一个数据列表。

数据列表都与酒店有关，因此它将有一个id、国家、地区、名称、图像和地址。从这个列表中，我想要一个列表中所有国家的永久导航栏，然后当你点击国家时，左边会出现一个包含地区的复选框的垂直列表，在主区域中是该国家的酒店的完整列表。

但是，当您选中复选框时，酒店会更新以过滤，从而仅显示所选地区的酒店。

作为一个起点，我想下面是这样的，但这是不对的，当你点击按钮时，区域复选框不会出现。在那之后，理想情况下，酒店出现在与该地区相关的主要部分，但我还不在那个部分。

<div id="hotelPage">
<div id="navBar">
<span v-for="country in showCountries" :key="country.country">
<button v-on:click="showHotelsByCountry(country.country)">{{ country.country }}</button>       
</span>
</div>
<br/>
<div id="bodyWrapper">
<div id="checkboxLeft">
<ul>
<li v-for="region in showRegionsByCountry()" :key="region.region">
<label for="region.region">{{ region.region }}</label>
<input 
type="checkbox"
id="region.region"
v-model="regionCheckBoxes" 
value="region.region">
</li>
</ul>
</div>
<div id="hotelsRight">
<div v-for="hotel in hotels">123</div>
</div>
</div>    
</div>
new Vue({
el: '#hotelPage',
data: {
hotels: [
{id: 0, hotelName: "hotel 1", country: "UK", region: "London", address: "road 1", image: "image1"}, 
{id: 1, hotelName: "hotel 2", country: "USA", region: "New York", address: "road 2", image: "image2"}, 
{id: 2, hotelName: "hotel 3", country: "France", region: "Paris", address: "road 3", image: "image3"},
{id: 3, hotelName: "hotel 4", country: "UK", region: "Cardiff", address: "road 4", image: "image4"},
{id: 4, hotelName: "hotel 5", country: "UK", region: "Cardiff", address: "road 5", image: "image5"},
],
country: ""
},
methods: {        
showRegionsByCountry: function(countryType) {
if(countryType != "") {
return this.hotels.find((item) => item.country == countryType);
}
}
},
computed: {
showCountries: function() {
return this.hotels.reduce((seed, hotel) => {
return Object.assign(seed, {
[hotel.country]: hotel
});
}, {});
}
}
});

Answer 1

Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#hotelPage',
data: {
hotels: [
{id: 0, hotelName: "hotel 1", country: "UK", region: "London", address: "road 1", image: "image1"},
{id: 1, hotelName: "hotel 2", country: "USA", region: "New York", address: "road 2", image: "image2"},
{id: 2, hotelName: "hotel 3", country: "France", region: "Paris", address: "road 3", image: "image3"},
{id: 3, hotelName: "hotel 4", country: "UK", region: "Cardiff", address: "road 4", image: "image4"},
{id: 4, hotelName: "hotel 5", country: "UK", region: "Cardiff", address: "road 5", image: "image5"},
{id: 5, hotelName: "hotel 6", country: "USA", region: "Chicago", address: "road 6", image: "image6"},
{id: 6, hotelName: "hotel 7", country: "USA", region: "Detroit", address: "road 7", image: "image7"},
],
selectedCountry: "",
selectedRegions: []
},
computed: {
filteredHotels() {
return this.hotels
.filter(h => this.selectedCountry
? h.country === this.selectedCountry
: true)
.filter(h => this.selectedRegions.length
? this.selectedRegions.includes(h.region)
: true)
},
countries() {
return [...new Set(this.hotels.map(h => h.country))]
},
countryRegions() {
return this.selectedCountry
? [...new Set(this.hotels
.filter(h => h.country === this.selectedCountry)
.map(h => h.region))]
: []
}
},
methods: {
setCountry(country) {
this.selectedCountry = country === this.selectedCountry
? ''
: country;
this.selectedRegions = [];
}
},
});

#bodyWrapper {
display: flex;
}
#bodyWrapper>* {
flex: 0 0 30%;
}
ul {
list-style-type: none;
padding-left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="hotelPage">
<div id="navBar">
<span v-for="country in countries" :key="country">
<button v-on:click="setCountry(country)">{{ country }}</button>       
</span>
</div>
<div id="bodyWrapper">
<div id="checkboxLeft">
<h4>Country regions:</h4>
<ul v-if="countryRegions.length">
<li v-for="region in countryRegions" :key="region">
<label>
<input type="checkbox" v-model="selectedRegions" :value="region">
{{ region }}
</label>
</li>
</ul>
<div v-else>Select a country</div>
</div>
<div>
<h4>Hotels:</h4>
<div v-for="hotel in filteredHotels">{{hotel.hotelName}}</div>
</div>
<div>
<h4>Data:</h4>
<pre>selectedCounty: {{selectedCountry}}
contryRegions: {{countryRegions}}
selectedRegions: {{selectedRegions}}
</pre>
</div>
</div>

这更多的是向你展示如何实现方法/功能，以及如何处理数据，而不是实际做你想做的事情。正如你所看到的，我已经更改了你所有的computed/methods，这就是我回答的目的。