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>

切換后的效果圖：