How to create likes with class toggle in vue.js?

Question

Layout

In this array, which is located in the feed, posts are displayed:

data() {
  return {
    header: {

    },
    footer: {

    },
    posts: [
      {
        id: 1,
        content: 'Текст первого поста',
        photo: PostSea,
        likesCount: 12,
        activeClass: 'active_like',
        isActive: false

      },
      {
        id: 2,
        content: 'Текст второго поста',
        photo: PostSea,
        likesCount: 12,
        activeClass: 'active_like',
        isActive: false
      },
      {
        id: 3,
        content: 'Текст третьего поста',
        photo: PostSea,
        likesCount: 12,
        activeClass: 'active_like',
        isActive: false
      }
     ]

In the post itself, in the actions block, there is a like block, in which there are two icons that should change when clicked, that is, an empty like should turn red.

<template>
  <div class="post" to="/post">
    <div class="user">

      <div class="col-3 user_image">
        <img src="../assets/img/user.png"/>
      </div>

      <div class="col-6 post_info">
        <p class="username">@carovandoe</p>
        <span class="data_time">два часа назад</span>
      </div>

      <div class="col-3"></div>
    </div>

    <div class="post_image">
      <img :src="post.photo">
    </div>

    <div class="actions">

      <div class="col-1 like" @click="isActive = !isActive">
        <i class="material-icons like_icon" v-if="!isActive">favorite_border</i>
        <i class="material-icons active_like" v-else>favorite</i>
      </div>

      <div class="col-2">
        <span class="like_count" @click="toggleLike">{{post.likesCount}}</span>
      </div>

      <div class="col-7"></div>

      <div class="col-2 download">
        <i class="material-icons download_icon">file_download</i>
      </div>
    </div>
    <div class="tags">

      <div class="col-12">
        <p><span class="tag" v-for="tag in tags">{{tag.name}} </span></p>
      </div>

    </div>
  </div>
</template>

You need to switch likes. While new to using vue, I hope you can help, thanks!

Answer 1

You are changing isActive even though you need post.isActive

<div class="col-1 like" @click="post.isActive = !post.isActive">
   <i class="material-icons like_icon" v-if="!post.isActive">favorite_border</i>
   <i class="material-icons active_like" v-else>favorite</i>
</div>