Javascript v-if，v-for断开相关选择逻辑

我试图使用Vue.js（最新版本）实现依赖选择，但当我有一些

v-for

和

v-if

时，我的应用程序逻辑中断。我不明白我的错误在哪里。 请帮我解决这个问题

点击

切换！拾取

并尝试更改地区选择，您将看到问题。 您还可以使用

v-if=“！cartPage.pickup”

删除div，或将

v-if

更改为

v-show

，您可以看到，一切正常

这是我的密码

var vm=new Vue({
el:“#应用程序”，
数据：{
用户信息：{
洛格丁：错，
},
cartPage：{
皮卡：错，
餐厅：{}，
当前城市：“”，
当前地区：“”，
当前餐厅：“”，
},
},
方法：{
setDefaultDistrict:函数（）{
this.cartPage.currentDistrict=this.cartPage.currentCity.districts[0]；
这个.setDefaultRestaurant（）；
},
setDefaultRestaurant:function（）{
this.cartPage.currentRestaurant=this.cartPage.currentDistrict.restaurants[0]；
},
},
})
vm.cartPage.restaurants=[{
城市：“城市1”，
地区:[{
地区名称：“城市1区1”，
餐厅：[{
地名：“城市1区1餐厅1”，
名称：“城市1区1餐厅1”，
地址：'City 1 district 1 Restaurant 1'，
时间：“10:00–22:00”，
}, {
地名：“城市1区1餐厅2”，
名称：“城市1区1餐厅2”，
地址：'City 1 district 1 Restaurant 2'，
时间：“10:00–20:00”，
}]
},
{
地区名称：“城市1区2”，
餐厅：[{
地名：“城市1区2餐厅1”，
名称：“城市1区2餐厅1”，
地址：'City 1 district 2 Restaurant 1'，
时间：“12:00–22:00”，
}, {
地名：“城市1区2餐厅2”，
名称：'City 1 district 2 Restaurant 2'，
地址：'City 1 district 2 Restaurant 2'，
时间：“12:00–22:00”，
}]
}
],
},
{
城市：“城市2”，
地区:[{
地区名称：“城市2区1”，
餐厅：[{
地名：“城市2区1餐厅1”，
名称：“城市2区1餐厅1”，
地址：'City 2 district 1 Restaurant 1'，
时间：“10:00–22:00”，
}, {
地名：“城市2区1餐厅2”，
名称：“城市2区1餐厅2”，
地址：'City 2 district 1 Restaurant 2'，
时间：“10:00–20:00”，
}]
},
{
地区名称：“城市2区2”，
餐厅：[{
地名：“城市2区2餐厅1”，
名称：'City 2 district 2 Restaurant 1'，
地址：'City 2 district 2 Restaurant 1'，
时间：“12:00–22:00”，
}, {
地名：“城市2区2餐厅2”，
名称：'City 2 district 2 Restaurant 2'，
地址：'City 2 district 2 Restaurant 2'，
时间：“12:00–22:00”，
}]
}
],
}, {
城市：“城市3”，
地区:[{
地区名称：“城市3区1”，
餐厅：[{
地名：“城市3区1餐厅1”，
名称：“城市3区1餐厅1”，
地址：'City 3 district 1餐厅1'，
时间：“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]
。自定义收音机{
显示：块；
利润率：10px；
边框：1px实心#000；
光标：指针；
}

标题
切换拾取开关！改善
地址:
{{singleCity.city}
地址:
{{singleCity.city}
地区
{{singleDistrict.districtName}
餐厅：
{{singleRestaurant.placeName}
{{cartPage.currentRestaurant.address}，{{{cartPage.currentRestaurant.hours}}。
您有：

<optgroup label="Choose city">
  <option value="1" v-for="singleCity in cartPage.restaurants">
    {{ singleCity.city }}
  </option>
</optgroup>

但是为什么呢？此选项选择不触发任何事件
<optgroup label="Choose city">
  <option v-bind:value="singleCity" 
          v-for="singleCity in cartPage.restaurants">
    {{ singleCity.city }}
  </option>
</optgroup>