參考作法助教作法

Untitled

//PopularUser.vue

<button
    **@click="changeFollowingCount(user.isFollowed)"**
  >
    {{ user.isFollowed ? "正在跟隨" : "跟隨" }}
</button>

methods: {
	changeFollowingCount(toggleIsFollowed) {
	  console.log("step 1. changeFollowingCount is click")
	  this.$emit('changeCount',toggleIsFollowed)
},

// User.vue
//data
user: {
  id: -1,
  account: "",
  name: "",
  email: "",
  introduction: "",
  avatar: "",
  banner: "",
  tweetCounts: 0,
  followingCounts: 0,
  followerCounts: 0,
  likeCount: 0,
  isFollowed: false,
},
methods: {
	handleChangeCount(value) {
	  console.log('step2')
	  console.log(value)
	  
	  if (value === false) {
	    this.followingCounts = this.followingCounts + 1
	  }
	  if (value === true) {
	    this.followingCounts = this.followingCounts - 1
	  }
	}
},
watch: {
  fetchCountChange(newVal) {
    console.log('step3 newVal',newVal)
    this.handleChangeCount(newVal)
	}
},

取得的內容

Untitled

Untitled