Laravel技巧集锦（29）：使用vuejs组件化开发关注按钮

1、创建vue文件，目录为：resources\assets\js\components\QuestionFollowButton.vue，写入

<template>

    <button  class="btn  btn-default"
             v-bind:class="{'btn-success':followed}"
             v-text="text"
             v-on:click="follow"
    >

    </button>
</template>

<script>
    export default {

        props:['question','user'],

        mounted() {
            this.$http.post('/api/question/follower',{'question':this.question,'user':this.user}).then(response=>{
                this.followed = response.data.followed;
            });
        },

        data(){
            return {
                followed:false
            }
        },

        computed:{
            text(){
                return this.followed?'取消关注1':'关注问题1';
            }
        },

        methods:{
           follow() {
                this.$http.post('/api/question/follow',{'question':this.question,'user':this.user}).then(response=>{
                    this.followed = response.data.followed;
                });
            },
        }
    }
</script>

2、在app.js中注册此按钮组件 resources\assets\js\app.js

require('./bootstrap');


Vue.component('question-follow-button', require('./components/QuestionFollowButton.vue'));

const app = new Vue({
    el: '#app'
});

3、视图中使用

//question user 即为props数据
<question-follow-button question="{{$question->id}}" user="{{\Auth::id()}}"></question-follow-button>

4、api.php中routes\api.php

Route::post('/question/follower',function (Request $request){
    $followed = \App\Follow::where('question_id',$request->get('question'))
        ->where('user_id',$request->get('user'))
        ->count();

    if ($followed){
        return response()->json(['followed'=>true]);
    }else{
        return response()->json(['followed'=>false]);
    }
})->middleware('auth:api');

Route::post('/question/follow',function (Request $request){
    $followed = \App\Follow::where('question_id',$request->get('question'))
        ->where('user_id',$request->get('user'))
        ->first();
    //当用户点击按钮时，进行判断，若已经关注则删除
    if ($followed!==null){
        $followed->delete();
        return response()->json(['followed'=>false]);
    }
   //若未关注则增加
    \App\Follow::create([
        'question_id' => $request->get('question'),
        'user_id' => $request->get('user'),
    ]);
    return response()->json(['followed'=>true]);
})->middleware('api');