Vue 简单实例 地址选配9 - 确认地址 - 删除地址

Posted 2021-02-21 joe235

1、给删除图标添加点击事件：

<!-- 删除地址 -->
<a href="javascript:;" class="addr-del-btn" @click="delAddress(index)">
            <svg class="icon icon-del">
                    <use xlink:href="#icon-del" />
            </svg>
</a>

当然一样可以传递 item.addressId

2、delAddress 方法：

// 删除地址
    delAddress(index) {
      this.addrList.map((item, i) => {
        if (index == i) {
          this.addrList.splice(i, 1)
        }
      })
    }

此时点击删除图标可以实现删除地址的功能。

当然我们也可以还用弹出框组件来实现删除功能，因为我们前面写过删除商品的功能，所以我们只需要把代码复制粘贴过来，再修改下就可以了。