How to implement favorites using vue

{

 "private": true,

 "scripts": {

 "prod": "gulp --production",

 "dev": "gulp watch"

 },

 "devDependencies": {

 "bootstrap-sass": "^3.3.7",

 "gulp": "^3.9.1",

 "jquery": "^3.1.0",

 "laravel-elixir": "^6.0.0-14",

 "laravel-elixir-vue-2": "^0.2.0",

 "laravel-elixir-webpack-official": "^1.0.2",

 "lodash": "^4.16.2",

 "vue": "^2.0.1",

 "vue-resource": "^1.0.3"

 }

}

const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

/*

 |--------------------------------------------------------------------------

 | Elixir Asset Management

 |--------------------------------------------------------------------------

 |

 | Elixir provides a clean, fluent API for defining some basic Gulp tasks

 | for your Laravel application. By default, we are compiling the Sass

 | file for our application, as well as publishing vendor resources.

 |

 */

elixir(mix => {

 mix.sass('app.scss')

 .webpack('app.js');

});

const app = new Vue({

 el: '#app'

});

php artisan make:model App\Models\Favorite -m

php artisan make:migration add_userId_to_posts_table --table=posts

public function up()

 {

 Schema::table('posts', function (Blueprint $table) {

  $table->integer('user_id')->unsigned()->after('id');

 });

 }

database/migrations/2018_01_18_142146_create_favorites_table.php 

public function up()

 {

 Schema::create('favorites', function (Blueprint $table) {

  $table->increments('id');

  $table->integer('user_id')->unsigned();

  $table->integer('post_id')->unsigned();

  $table->timestamps();

 });

 }

Auth::routes();

Route::post('favorite/{post}', 'ArticleController@favoritePost');

Route::post('unfavorite/{post}', 'ArticleController@unFavoritePost');

Route::get('my_favorites', 'UsersController@myFavorites')->middleware('auth');

public function favorites()

 {

 return $this->belongsToMany(Post::class, 'favorites', 'user_id', 'post_id')->withTimeStamps();

 }

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Post;

use Illuminate\Support\Facades\Auth;

class ArticleController extends Controller

{

 public function index()

 {

 $data = Post::paginate(5);

 return view('home.article.index', compact('data'));

 }

 public function show($id)

 {

 $data = Post::find($id);

 return view('home.article.list', compact('data'));

 }

 public function favoritePost(Post $post)

 {

 Auth::user()->favorites()->attach($post->id);

 return back();

 }

 public function unFavoritePost(Post $post)

 {

 Auth::user()->favorites()->detach($post->id);

 return back();

 }

}

import axios from 'axios';

window.axios = axios;

// resources/assets/js/components/Favorite.vue

<template>

 <span>

 <a href="#" rel="external nofollow" rel="external nofollow" v-if="isFavorited" @click.prevent="unFavorite(post)">

  <i class="fa fa-heart"></i>

 </a>

 <a href="#" rel="external nofollow" rel="external nofollow" v-else @click.prevent="favorite(post)">

  <i class="fa fa-heart-o"></i>

 </a>

 </span>

</template>

<script>

 export default {

 props: ['post', 'favorited'],

 data: function() {

  return {

  isFavorited: '',

  }

 },

 mounted() {

  this.isFavorited = this.isFavorite ? true : false;

 },

 computed: {

  isFavorite() {

  return this.favorited;

  },

 },

 methods: {

  favorite(post) {

  axios.post('/favorite/'+post)

   .then(response => this.isFavorited = true)

   .catch(response => console.log(response.data));

  },

  unFavorite(post) {

  axios.post('/unfavorite/'+post)

   .then(response => this.isFavorited = false)

   .catch(response => console.log(response.data));

  }

 }

 }

</script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

// 加在logout-form之后

<form id="logout-form" action="{{ url(&#39;/logout&#39;) }}" method="POST" style="display: none;">

 {{ csrf_field() }}

</form>

<a href="{{ url(&#39;my_favorites&#39;) }}" rel="external nofollow" >我的收藏夹</a>

// resources/views/home/article/index.blade.php

if (Auth::check())

 <p class="panel-footer">

 <favorite

  :post={{ $list->id }}

  :favorited={{ $list->favorited() ? 'true' : 'false' }}

 ></favorite>

 </p>

public function favorited()

 {

 return (bool) Favorite::where('user_id', Auth::id())

    ->where('post_id', $this->id)

    ->first();

 }

Vue.component('favorite', require('./components/Favorite.vue'));

npm run dev

<strong>php artisan make:controller UsersController</strong>

app/Http/Controllers/UsersController.php 

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Illuminate\Support\Facades\Auth;

class UsersController extends Controller

{

 public function myFavorites()

 {

 $myFavorites = Auth::user()->favorites;

 return view('users.my_favorites', compact('myFavorites'));

 }

}

// resources/views/users/my_favorites.blade.php

extends('layouts.app')

@section('content')

<p class="container">

 <p class="row">

 <p class="col-md-8 col-md-offset-2">

  <p class="page-header">

  <h3>My Favorites</h3>

  </p>

  @forelse ($myFavorites as $myFavorite)

  <p class="panel panel-default">

   <p class="panel-heading">

   <a href="/article/{{ $myFavorite->id }}" rel="external nofollow" >

    {{ $myFavorite->title }}

   </a>

   </p>

   <p class="panel-body" style="max-height:300px;overflow:hidden;">

   <img src="/uploads/{!! ($myFavorite->cover)[0] !!}" style="max-width:100%;overflow:hidden;" alt="">

   </p>

   @if (Auth::check())

   <p class="panel-footer">

    <favorite

    :post={{ $myFavorite->id }}

    :favorited={{ $myFavorite->favorited() ? 'true' : 'false' }}

    ></favorite>

   </p>

   @endif

  </p>

  @empty

  <p>You have no favorite posts.</p>

  @endforelse

  </p>

 </p>

</p>

@endsection

Route::get('/', 'ArticleController@index');