Toggle class and insert data vue js

RK-Rohan 0
Viewed 45

I'm beginner Vue js, I want to try make follow and unfollow system with Laravel. I'm facing problem with v-for loop for getting each data insert and toggle follow and unfollow with icon class.

this is my template file :

<template>
<ul class="suggestions-lists m-0 p-0">
    <li v-for="(user, index) in users" :key="user.id" class="d-flex mb-4 align-items-center">
            <h6>{{user.name}}</h6>
        <div class="add-suggestion">
            <a href="javascript:void(0);" @click="toggleFollow(user)">
                <i :class="'text-danger '+(user ? 'ri-user-follow-line' : 'ri-user-add-line')"></i>
            </a>
        </div>
    </li>
</ul>
</template>

This is Script :

<script>
export default {
props: ['userid'],
data: function () {
    return {
        users: [] 
    }
},

methods: {
    getUsers: function() {
        var app = this;

        axios.get('/followers')
            .then(function (response) {
            app.users = response.data;
        })
        .catch(function (error) {
            console.log(error.message);
        });
    },
    toggleFollow: function (user) {
        
        if (this.user = !this.user) {
            console.log(this.user);
            this.followAdd(user)
        } else {
            console.log(this.user);
        }
    },          
    followAdd: function (user) {

        this.user=user.id;
        console.log(this.user);

          axios.post('followers/store', { follower: this.userid, following: this.user }).then((response) => {
            console.log(response.data)
          }).catch((errors) => {
            console.log(errors)
          });
    },

},

created() {
  this.getUsers();
},

}

This is User Data getting from /followers :

[{"id":1,"name":"Rezaul Karim","email":"admin@admin.com","phone":"+8801210836617","date_of_birth":"2022-09-05","gender":"Male","created_at":"2022-09-05T09:04:45.000000Z","updated_at":"2022-09-05T09:10:46.000000Z"},{"id":3,"name":"RK","email":null,"phone":"+8801450745578","date_of_birth":"1991-01-01","gender":"Male","created_at":"2022-09-05T09:22:15.000000Z","updated_at":"2022-09-05T09:22:31.000000Z"}]

This is foolowAdd store method :

    public function store(Request $request)
{
    $follower = new Followers();  
    $follower->insert([
        'follower_id'       => $request->follower,
        'following_id'       => $request->following
    ]);       
  return response()->json($follower->get());  
}

This is final View : enter image description here

I want to toggle this icon and insert data. please help me out, How implement this.

vue-component vuejs2 laravel vue.js javascript
1 Answers

Something like that:

new Vue({
  el: '#container',
  template: `<div>
    <h1>{{ users.find(user => user.id === currentUser).name }}'s followers</h1>
    <ul>
      <li v-for="user of users.filter(user => user.id !== currentUser)">
        {{ user.name }}
        <button v-if="user.follows.includes(currentUser)" @click="unfollow" :data-id="user.id">&check;</button>
        <button v-else @click="follow" :data-id="user.id">&times;</button>
      </li>
    </ul>
  </div>`,
  data() {
    return {
      currentUser: 1,
      users: [{
        id: 0,
        name: 'John Doe',
        follows: [2]
      },{
        id: 1,
        name: 'Jane Doe',
        follows: [0]
      },{
        id: 2,
        name: 'Jim Doe',
        follows: [1]
      }]
    }
  },
  methods: {
    follow(e) {
      user = this.users.find(user => +e.target.dataset.id === user.id)
      setTimeout(() => {
        set = new Set(user.follows)
        set.add(this.currentUser)
        user.follows = [ ...set ]
      }, 100)
    },
    unfollow(e) {
      user = this.users.find(user => +e.target.dataset.id === user.id)
      userIdx = this.users.findIndex(user => +e.target.dataset.id === user.id)
      setTimeout(() => {
        set = new Set(user.follows)
        set.delete(this.currentUser)
        this.users[userIdx].follows = [ ...set ]
      }, 100)
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="container"></div>

shaedrich0
Related