2
Vue.js(前回のバージョン)を使用して依存選択を実装しようとしていますが、v-for
とv-if
があるとアプリケーションロジックがブレークします。私は間違いがどこにあるのか理解できません。 問題を解決してください。v-if、v-break依存関係の選択ロジック
Toggle !pickup
をクリックして地区選択を変更しようとすると、問題が表示されます。 また、ここで
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