Laravel 8 axios ( ajax ) 처리 후 업데이트 방법 문의

[Macfa]

-- 현재 상황 게시판 형식의 사이트를 제작 중입니다. php 코드로 CRUD 를 만들어 놨습니다. 댓글 쓰기 대댓글 달기 게시글 좋아요 등을 위해 vue js 도입했습니다.

해결하고자 하는 문제

1. 게시글 좋아요 || 댓글 쓰기 vue axios.post 를 이용하여 라라벨 컨트롤러 함수를 호출 기능은 작동되나 업데이트가 실시간으로 되지 않는 상태입니다. 여기서 혼란스러운게 실시간 데이터를 바꾸기 위해서는 vue 의 v- 로 시작하는 기능을 써야할듯 한데 그렇게 하려면 지금 페이지는 서버에서 다 가져오는 상태인데 ( 서버 데이터 != vue.js v- 함수들 ) 이 상태로는 통신이 안될테니 데이터를 vue 로 다 바꿔서 사용해야하는건지 궁금합니다.

코드 혹은 오류

index.blade.php 하단

    <script src="{{ mix('js/app.js') }}"></script>
    <script>
        new Vue({
            el: '#post',
            data: {
                vote: null,
            },
            methods: {
                upvote(id) {
                    alert("처리되었습니다.");
                    axios.post("/post/upvote/"+id)
                    .then((res) => {
                        console.log(res);
                    })
                    .catch(function(err) {
                        console.log(err);
                    })
                },
            },
        });
    </script>

                                <img @click="upvote({{ $post->id }})" src="{{ asset('image/small.png') }}" alt="" />

                                <div class="function-text">
                                    <p>{{ $post->like }}</p>
                                </div>

환경

Laravel Framework 8.35.1 PHP 8.0.3 (cli) (built: Mar 4 2021 20:45:17) ( NTS ) npm 7.7.6 "axios": "^0.21.1", "vue": "^2.5.17",

시도해본 방법

[Haytsir]

라라벨 서버에서 어떤 모습의 데이터를 응답해오는 지는 모르겠지만, 응답을 처리하는 로직에서 데이터를 반영해보시는게 좋겠습니다.

가령, 라라벨 서버에서 /post/upvote Post 요청을 받아서, 이 요청에 대한 서버 내부 행동을 처리하고 다시 클라이언트측에 JSON 형태로

{
   vote: $post.like
}

를 응답해줬다고 한다면,

upvote(id) {
    alert("처리되었습니다.");
    axios.post("/post/upvote/"+id)
        .then((res) => {
            this.vote = res.data.like
         })
         .catch(function(err) {
              console.log(err);
         })
    },

처럼 할당해주는 방식으로 이용하시면 되겠습니다.

먼저 res 또는 res.data안에 어떤 값들이 들어와 있는지를 확인하고나면, 그 안에 들어있는 재료들을 이용해서 어떤 요리를 만들 것인지 결정하기 쉬우실거에요

[Macfa]

@Hatser 답변 감사합니다. 응답이 늦었네요.. ㅠㅠ vue.js 는 제가 추구하는 방법에 맞지않아 jqeury 로 재구현 했으며 말씀해준 방법과 비슷하게 ? $('.post-like-text').val(res.result.data); 위와 같은 방법으로 클래스로 묶고 거기에 값을 대입함으로써 처리했습니다