vue实现点击关注
实现点击关注功能
在Vue中实现点击关注功能，通常需要处理用户交互、状态管理和API请求。以下是实现步骤：
数据绑定与状态管理
在Vue组件中定义一个布尔值数据属性表示关注状态：
data() {
return {
isFollowing: false
}
}模板中的交互绑定
使用v-on指令绑定点击事件，并根据状态显示不同文本：
<button @click="toggleFollow">
{{ isFollowing ? '已关注' : '关注' }}
</button>事件处理方法
在methods中定义toggleFollow方法处理点击逻辑：
methods: {
toggleFollow() {
this.isFollowing = !this.isFollowing
// 这里可以添加API调用
}
}添加API请求
实际应用中需要调用后端接口：
async toggleFollow() {
try {
const action = this.isFollowing ? 'unfollow' : 'follow'
const response = await axios.post(`/api/${action}`, {userId: this.targetUserId})
if (response.data.success) {
this.isFollowing = !this.isFollowing
}
} catch (error) {
console.error('操作失败', error)
}
}样式优化
根据状态添加不同样式类：
<button
@click="toggleFollow"
:class="{'follow-btn': true, 'following': isFollowing}"
>
{{ isFollowing ? '已关注' : '关注' }}
</button>.follow-btn {
padding: 5px 15px;
border-radius: 4px;
cursor: pointer;
}
.following {
background-color: #f0f0f0;
color: #666;
}初始状态获取
在created钩子中获取初始关注状态：
async created() {
try {
const response = await axios.get(`/api/check-follow?userId=${this.targetUserId}`)
this.isFollowing = response.data.isFollowing
} catch (error) {
console.error('获取关注状态失败', error)
}
}防抖处理
避免快速重复点击：
import { debounce } from 'lodash'
methods: {
toggleFollow: debounce(function() {
// 原有逻辑
}, 300)
}
