Как создать лайки с помощью переключения класса во vue.js?

Question

[Еления]

В данном массиве, который находится в ленте выводятся посты:

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
      }
     ]

В самом посте в блоке actions находится блок like, в котором две иконки, которые при клике должны меняться, то есть пустой лайк должен становиться красным.

<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>

Нужно сделать переключение лайков. Пока новичок в использовании vue, надеюсь на вашу помощь, спасибо!

Comments

[markmariner]

Пожалуйста, уточните в чём именно проблема. Что не работает, как необходимо? В шаблоне есть метод toggleLike, что он делает? Что у него внутри?

Answer 1

[Андрей Седышев]

Вы меняете isActive, хотя нужно 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>