1 . 定义接口数据类型
export type Doctor = {
// 医生ID
id: string
// 医生名称
name: string
// 头像
avatar: string
// 医院名称
...
}
2.给关注按钮添加点击事件
@click="follow(item)"
动态显示文字
{{ item.likeFlag === 1 ? '已关注' : '+ 关注' }}
3.添加一个加载
const loading = ref(false)
点击将状态设置为true
loading.value = true<br>
:loading="loading"
4.根据封装接口发送请求
await followTarget(item.id)
5.try {
// 后台会根据当前的状态自动进行区分是否关注
await followTarget(item.id)
item.likeFlag = item.likeFlag === 1 ? 0 : 1
} finally {
loading.value = false
}
这里捕获到完成就将状态重新设置为false
