美文网首页
uniapp 中点击某个按钮关注成功 操作

uniapp 中点击某个按钮关注成功 操作

作者: 前端Tree | 来源:发表于2020-03-15 19:02 被阅读0次

1、dom 子组件

<view class="flex align-center justify-center rounded bg-main text-white animated" @click="follow(index)" v-if="!item.isFollow" hover-class="jello"  style="width: 90rpx; height: 50rpx;"> 
    关注
</view>

//  js
methods:{
    follow(index){
        this.$emit("follow",index)
        },      
}
// 点击关注 拿到关注的索引,传递给父组件 父组件根据索引改变 数据

v-if="!item.isFollow" 特意加了个if 也就是如果没有关注则显示,关注则不显示
父组件 中

<template>
    <view class="content">
        <block v-for="(item,index) in list" :key="index">
            <common-list :item="item" :index="index" @follow="follow"></common-list>
            <divider></divider>
        </block>
    </view>
</template>

follow(e){
    console.log(e)
    this.list[0].isFollow = true
    uni.showToast({
    title:"关注成功" 
})
}

父组件通过自定义函数接收

相关文章

网友评论

      本文标题:uniapp 中点击某个按钮关注成功 操作

      本文链接:https://www.haomeiwen.com/subject/bvemehtx.html