v-if,v-for依赖选择逻辑
问题描述:
我试图使用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>
答
你在哪里:
<optgroup label="Choose city">
<option value="1" v-for="singleCity in cartPage.restaurants">
{{ singleCity.city }}
</option>
</optgroup>
您没有正确设置option
的值,您始终有“1”。
试试这个:
<optgroup label="Choose city">
<option v-bind:value="singleCity"
v-for="singleCity in cartPage.restaurants">
{{ singleCity.city }}
</option>
</optgroup>
但是,为什么?这选择不触发任何事件 – CroaToa