Vue 简单实例 地址选配8 - 确认地址 - 设为默认地址
我们可以看到所有的地址都是点亮的状态,就是外面都有个橙色的框。我们需要把默认地址,才设置为点亮的状态。
1、新建变量 checkedIndex,默认为 0,然后把遍历地址列表,把字段 isDefault 为 true 的地址索引赋值给 checkedIndex
data() { return { checkedIndex: 0, // 默认选中的索引 } }, methods: { getAddress() { this.axios.get('/mock/address.json').then(res => { console.log(res) this.addrList = res.data.data this.addrList.forEach((item, index) => { if (item.isDefault) { this.checkedIndex = index } }) }) }, }
2、修改循环代码:
<li :class="{ check: item.isDefault }" v-for="item in addrFilter" :key="item.addressId">
也可以写为:
<li :class="{ check: checkedIndex == index }" v-for="(item, index) in addrFilter" :key="item.addressId">
此时效果图:
3、添加点击事件:
<li :class="{ check: checkedIndex == index }" v-for="(item, index) in addrFilter" :key="item.addressId" @click="checkedIndex = index">
把当前索引赋值给 checkedIndex。
点击第一个地址后的效果图:
4、给设为默认添加点击事件:
<a href="javascript:;" class="addr-set-default-btn" @click="slectDefault(index)"> <i>设为默认</i> </a> <script> export default { methods: { // 设为默认 slectDefault(index) { console.log(index) this.addrList.map((item, i) => { if (index == i) { item.isDefault = true } else { item.isDefault = false } }) } } } </script>
当前点击的索引和遍历中的索引一致时,设为 true ,其他都设置为 false。
也可以点击时传递 addressId,效果都是一样的:
<a href="javascript:;" class="addr-set-default-btn" @click="slectDefault(item.addressId)"> <i>设为默认</i> </a> <script> export default { methods: { // 设为默认 slectDefault(id) { console.log(id) this.addrList.map(item => { if (id == item.addressId) { item.isDefault = true } else { item.isDefault = false } }) } } } </script>
切换后的效果图: