2
我試圖使用Vue.js（最新版本）實現依賴選擇，但是當我有幾個v-for和v-if時，我的應用程序邏輯會中斷。我不明白我的錯誤在哪裏。 請幫我解決問題。v-if，v-for依賴選擇邏輯
點擊Toggle !pickup並嘗試更改區選擇，你會看到問題。 您也可以刪除DIV與v-if="!cartPage.pickup"或更改v-if到v-show，你可以看到，一切工作..
這裏是我的代碼
var vm = new Vue({
el: '#app',
data: {
userInfo: {
loggedIn: false,
},
cartPage: {
pickup: false,
restaurants: {},
currentCity: '',
currentDistrict: '',
currentRestaurant: '',
},
},
methods: {
setDefaultDistrict: function() {
this.cartPage.currentDistrict = this.cartPage.currentCity.districts[0];
this.setDefaultRestaurant();
},
setDefaultRestaurant: function() {
this.cartPage.currentRestaurant = this.cartPage.currentDistrict.restaurants[0];
},
},
})
vm.cartPage.restaurants = [{
city: "City 1",
districts: [{
districtName: "City 1 district 1",
restaurants: [{
placeName: "City 1 district 1 Restaurant 1",
name: 'City 1 district 1 Restaurant 1',
address: 'City 1 district 1 Restaurant 1',
hours: '10:00–22:00',
}, {
placeName: "City 1 district 1 Restaurant 2",
name: 'City 1 district 1 Restaurant 2',
address: 'City 1 district 1 Restaurant 2',
hours: '10:00–20:00',
}]
},
{
districtName: "City 1 district 2",
restaurants: [{
placeName: "City 1 district 2 Restaurant 1",
name: 'City 1 district 2 Restaurant 1',
address: 'City 1 district 2 Restaurant 1',
hours: '12:00–22:00',
}, {
placeName: "City 1 district 2 Restaurant 2",
name: 'City 1 district 2 Restaurant 2',
address: 'City 1 district 2 Restaurant 2',
hours: '12:00–22:00',
}]
}
],
},
{
city: "City 2",
districts: [{
districtName: "City 2 district 1",
restaurants: [{
placeName: "City 2 district 1 Restaurant 1",
name: 'City 2 district 1 Restaurant 1',
address: 'City 2 district 1 Restaurant 1',
hours: '10:00–22:00',
}, {
placeName: "City 2 district 1 Restaurant 2",
name: 'City 2 district 1 Restaurant 2',
address: 'City 2 district 1 Restaurant 2',
hours: '10:00–20:00',
}]
},
{
districtName: "City 2 district 2",
restaurants: [{
placeName: "City 2 district 2 Restaurant 1",
name: 'City 2 district 2 Restaurant 1',
address: 'City 2 district 2 Restaurant 1',
hours: '12:00–22:00',
}, {
placeName: "City 2 district 2 Restaurant 2",
name: 'City 2 district 2 Restaurant 2',
address: 'City 2 district 2 Restaurant 2',
hours: '12:00–22:00',
}]
}
],
}, {
city: "City 3",
districts: [{
districtName: "City 3 district 1",
restaurants: [{
placeName: "City 3 district 1 Restaurant 1",
name: 'City 3 district 1 Restaurant 1',
address: 'City 3 district 1 Restaurant 1',
hours: '10:00–22:00',
}, ]
}, ],
},
]
vm.cartPage.currentCity = vm.cartPage.restaurants[0];
vm.cartPage.currentDistrict = vm.cartPage.currentCity.districts[0];
vm.cartPage.currentRestaurant = vm.cartPage.currentDistrict.restaurants[0];.custom-radio {
display: block;
margin: 10px;
border: 1px solid #000;
cursor: pointer;
}<script src="https://unpkg.com/[email protected]"></script>
<div id="app">
<div class="cart__delivery-and-pay">
<h2 class="cart__delivery-and-pay--title">Heading</h2>
<div class="delivery__block">
<div class="delivery__block-header cf">
<div class="delivery__variants"><span @click="cartPage.pickup = false" v-bind:class="{ 'active': !cartPage.pickup }" class="courier custom-radio">Toggle pickup</span><span @click="cartPage.pickup = true" v-bind:class="{ 'active': cartPage.pickup }" class="pickup custom-radio">Toggle !pickup</span></div>
</div>
<div class="delivery__cols">
<!-- if delete this everything is working! -->
<div v-if="!cartPage.pickup" class="delivery__col delivery__address">
<div class="delivery__col-heading">Address:
<div class="custom-select__wrapper item__option">
<select class="custom-select">
<optgroup label="Choose city">
<option value="1" v-for="singleCity in cartPage.restaurants">{{ singleCity.city }}</option>
</optgroup>
</select>
</div>
</div>
</div>
<!-- if delete this everything is working! -->
<div v-if="cartPage.pickup" class="delivery__col delivery__address">
<div class="delivery__col-heading">Address:
<div class="custom-select__wrapper item__option delivery__address-city">
<select v-model="cartPage.currentCity" @change="setDefaultDistrict" class="custom-select">
<option v-for="singleCity in cartPage.restaurants" v-bind:value="singleCity" v-bind:selected="cartPage.currentCity.city == singleCity.city ? true : false">{{ singleCity.city }}</option>
</select>
</div>
</div>
<div class="delivery__row delivery__row-flex-start">District
<div class="custom-select__wrapper item__option">
<select v-model="cartPage.currentDistrict" @change="setDefaultRestaurant" class="custom-select">
<option v-for="singleDistrict in cartPage.currentCity.districts" v-bind:value="singleDistrict">{{ singleDistrict.districtName }}</option>
</select>
</div>
</div>
<div class="delivery__row delivery__row-flex-start">Restaurant:
<div class="custom-select__wrapper item__option">
<select v-model="cartPage.currentRestaurant" class="custom-select">
<option v-for="singleRestaurant in cartPage.currentDistrict.restaurants" v-bind:value="singleRestaurant">{{ singleRestaurant.placeName }}</option>
</select>
</div>
</div>
<div class="delivery__row delivery__row-flex-start delivery__row--last-row"><span v-if="cartPage.currentRestaurant" class="delivery__row-note">{{ cartPage.currentRestaurant.address }}, {{ cartPage.currentRestaurant.hours }} ч.</span></div>
</div>
</div>
</div>
</div>
</div>
但是，爲什麼？這選擇不觸發任何事件 – CroaToa