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>

切换后的效果图：