Laravel-False response in axios inside vue.js

Question

This is my code for my Laravel controller

public function show($postId){
        $reaction = Reaction::where([
            'post_id' => $postId,
            'user_id' => auth()->id(),
            ])->first();    
        
    if ($reaction) {
        return response()->json(['isHeart' => true]);
    } else {
        return response()->json(['isHeart' => false]);
    }
        
       
}

Code for my Vue.js below


axios.defaults.headers.common['X-CSRF-TOKEN'] = document.head.querySelector('meta[name="csrf-token"]').content;
export default{
    data(){
        return{
            isFilled:false,
            isHeart:false,
        };
    },
    created(){
        axios.get('/posts/heart-status/${this.postId}')
        .then(response =>{
            console.log(response.data.isHeart)
            this.isFilled = response.data.isHeart;
        })
        .catch(function (error) {
          console.error(error);
        })
    },
    methods:{
        toggleFill(){
            if(this.isFilled){
                this.unheart();
                this.isFilled = false;
            }else{
                this.heart();
                this.isFilled = true;
                this.isHeart = true
      setTimeout(() => {
        this.isHeart = false;
      }, 1000);
            }
        },
        checkHeartStatus(){
        axios.get('/posts/heart-status/${this.postId}')
        .then(response =>{
            console.log(response.data.isHeart)
            this.isFilled = response.data.isHeart;
        })
        .catch(function (error) {
          console.error(error);
        })
    },
        heart(){
            axios.post('/posts/heart',{
                post_id: this.postId,
            })
            .then(response =>{
                this.isFilled = true;
                this.isHeart = true
                console.log(response);
            })
            .catch(error =>{
                console.error(error);
            });
        },
        unheart(){
            axios.post('/posts/unheart',{
                post_id: this.postId
            })
            .then(response =>{
                this.isFilled = false;
                this.isHeart = false;
                console.log(response);
            })
            .catch(error =>{
                console.error(error);
            });
        }
    },
    props: {
        postId:{
            type: Number,
            required: true
        }
    }
};

</script>

So I want to get a response = true ,in this code but even though it has data it always return false.

And when i go to posts/heart-status/1 it will give me true, but then in the code above with the method created() it will give me false.

Jay Fuego · Accepted Answer · 2023-02-11 15:03:31Z

1

already know the problem, instead of using single quotes I use backticks

created(){
        axios.get(`/posts/heart-status/${this.postId}`)
        .then(response =>{
            console.log(response.data.isHeart)
            this.isFilled = response.data.isHeart;
        })
        .catch(function (error) {
          console.error(error);
        })
    },

answered Feb 11, 2023 at 15:03

Jay Fuego

115 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Laravel-False response in axios inside vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related