Обновление view_count col в базе данных, laravel, vue js

Question

Я пытаюсь обновить столбец view_count на каждом @click.но не мог понять правильный путь.

Сначала сделал контроллер --resources и извлекал данные через api.

контроллер:

public function index()
{
    $articles = Article::all();

    return response()->json([
        "articles" => $articles
    ], 200);
}

public function show($id)
{
    $article = Article::whereId($id)->first();

    return response()->json([
        "article" => $article
    ], 200);
}

также установить функцию обновления тоже.

public function update(Request $request, $id)
{
    $view = Article::find($id);
    $view->update($request->where("view_count"));
    return response()->json(["message" => "view_count updated"]);
}

Я устанавливаю маршруты API:

Route::get('/articles', 'ArticlesController@index');
Route::get('/articles/{id}', 'ArticlesController@show');
Route::get('/articles/{id}', 'ArticlesController@update');

И, наконец,в Vue.js

<p class="button">
   <i @click.prevent="count" class="fas fa-chevron-right"></i>
</p>

data(){
    return {
        view: 0,
    };
},
methods: {
    count: function(){
        axios.post("/api/articles" + this.item.id).then(response => {
            this.view++;
        })
        window.location.href = "pages/" + this.item.id

    }
}

он считает, но не обновляет столбец.также, когда я обновляю страницу, конечно, она начинает отсчитывать от 0 ... это не очень эффективный способ.Какой самый лучший и правильный способ сделать это?

Спасибо.

Не: Кстати, я получаю и перебираю api в родительском компоненте:

<div class="listWrap" :key="item.id" v-for="item in filterArticles">
   <list :item="item" />
</div>

Answer 1

Ваш рабочий процесс для обновления просмотров неверен.

Во-первых, мы должны изменить наш метод URI метода обновления на GET, как показано ниже:

Route::get('/articles/update/{id}', 'ArticlesController@update');

тогда наш update метод в пределах ArticlesController увеличивает view_count значение:

public function update(int $id)
{
   // i have changed the $view by $article
    $article = Article::find($id);
    $article->view_count++;
    $article->save();
    return response()->json(["message" => "view_count updated", 201]);
}

и в нашем компоненте Vue мы должны обновить URI метода обновления и имя метода HTTP, потому что мы должны использовать один и тот же глагол HTTP как на стороне клиента, так и на стороне сервера.

    <p class="button">
       <i @click.prevent="count" class="fas fa-chevron-right"></i>
    </p>

    <script>
    export default {
// as you are using parent/child relationship betwen components, you should use props.
        props: { item: Object },
        data(){
            return {
                view: 0,
            };
        },
        methods: {
            count: function(){
                axios.get(`/api/articles/update/${this.item.id}`).then(response => {
                    this.view++;
                })
                window.location.href = "pages/" + this.item.id;
            }
        } 
    }
    </script>