Как устранить ошибку Vue-компонента Error in mounted hook: «ReferenceError: post_id is not defined»?

Question

[Sasha]

Привет! Пишу Vue-компонент для отображения кол-ва лайков (Laravel 5.5 + Vue v.2.5.16):
возникает ошибка

Error in mounted hook: "ReferenceError: post_id is not defined"

Код компонента:

<template> 
        <span>
            <i class="fa fa-heart"></i> {{ likescount }}
        </span>    
 </template> 

<script>
    import { bus } from '../bootstrap';
    import 'vuejs-noty/dist/vuejs-noty.css'
    export default {
        props: ["post_id"],
        
        data: function() {
            return { 
                likescount: 0,
            }
        },
        
        created(){
            bus.$on('postliked', (data) => {
               this.updatelikescount(post_id); 
            });
        },
        mounted : function() {
            this.updatelikescount(post_id);
        },
        
        methods: {   
            updatelikescount(post_id) {
            axios
                .get('/blog/post/likecount/' + post_id)
                .then(response => {
                    this.likescount = response.data.data[0][0]
                })        
                .catch(response => console.log(response.data));
             },       
        }
    };
</script>

Код blade:

<likepostcount 
    :post_id={{ $post->id }}
></likepostcount>

При открытии VueDevTools компонент и свойство видимы, значение post_id корректно заполнено.
Но ошибка не позволяет отобразить кол-во лайков, они остаются неизменными = 0.

Comments

[Koteezy]

во первых, не ["post_id"], а ["postId"], во вторых не :post_id={{ $post->id }} а :post-id={{ $post->id }}

[Koteezy]

Да и вообще, как бы, будет не . post_id, а this. post_id, если уж на то пошло, у вас же это не локальное свойство, а свойство относящиеся к экземпляру вью

Answer 1

[Sasha]

Решил так:

props: {
  post_id: {
    type: Number,
    default: () => {}
  }
},
mounted : function() {
  this.updatelikescount(this.post_id);
},