当前位置 > it书童 > laravel > 正文

laravel 使用 vue 组件

laravel it书童 2019-10-12 11:36:29 0赞 0踩 398阅读 0评论

以文章阅读数增加为例子演示如何在 laravel 中使用 vue 组件

开发过程中应保持 npm run watch-poll 一直开启

新增 vue 组件

resources/js/app.js 引入组件

// 引入 qs
window.qs = require('qs');
// 引入组件
Vue.component('pageview-component', require('./components/PageViewComponent.vue').default);

新建 resources/js/components/PageViewComponent.vue,代码如下:

<template>
    <span>阅读:{{ page_view }}</span>
</template>

<script>
    export default {
        data() {
            return {
                page_view: null,
            }
        },

        props: ['id'],

        mounted() {
            let api = "/get-page-view";
            axios.post(api, qs.stringify({
                id: this.id,
            })).then(response => {
                this.page_view = response.data
            });
        }
    }
</script>

接口代码

以上代码定义了 vue 请求的接口为 /get-page-view, 接下来需要写接口代码

routes/web.php 中定义路由:

Route::post('/get-page-view', 'HomeController@getPageView')->name('m.get-page-view');

具体代码:

public function getPageView()
{
    $id = request('id', 0);
    if (!$id) {
        return 0;
    }
    $article = Article::find($id);
    if (!$article) {
        return 0;
    }
    $article->increment('page_view');
    $article->save();
    return $article->page_view ++;
}

调用组件

在相应的视图中调用组件并传递相应的参数

<pageview-component :id="{{ $article->id }}"></pageview-component>
转载须注明出处:https://www.itshutong.com/articles/345/laravel-uses-vue-components
关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
发表评论
我有句话,不知当讲不当讲?
要讲之前请先 登录