javascript - Vue组件无法正常显示

Question

我是 Vue 新手，遇到了一些困难，我创建了一个组件，该组件接收一个 post 变量作为 prop，当该组件安装时，它会通过 axios POST 请求获取与该帖子相关的其他帖子(类别相同，但 id 不同)收到的 Prop )。

但是我的组件以一种奇怪的方式呈现，并且相关帖子没有显示，这是我在浏览器中看到的:

/image/JiT4W.png

在浏览器的源代码查看器中:

/image/5LuBM.png

这是我的 Blade 模板中的组件(注意我如何使用 @json 指令传递 Prop ):

    <div class="sidebar_container" style="">
            <div class="sidebar_stripe_white" style=""></div>
            <related-post-list :post="@json($classPost)"></related-post-list>
        </div>

这是我的RelatedPostList.vue 组件:

    <template>
    <div class="sidebar_related_container" style="">
        <span class="sidebar_related_title" style="">Temas Relacionados</span>
        <div class="sidebar_related_content_container" v-for="post in relatedPosts" :key="post.id" style="">
            <a class="sidebar_related_content_image" :href="'/conducta-canina/${post.slug}'"  :style="'background-image:url(${post.slug});'">
                <div class="black_gradient" style=""></div>
            </a>
            <div class="sidebar_related_content_text_container" style="">
                <span class="sidebar_related_content_text_title" style="">{{ post.postcategory.name }}</span>
                <span class="sidebar_related_content_text_description" style="">{{ post.title }}</span>
            </div>
        </div>
    </div>
    </template>
    <!--SCRIPTS-->
    <script>
    export default
    {
    name: 'RelatedPostList',
        
    props: {
        post: {required:true}
    },

    data: function () {
        return {

            relatedPosts: null,
            id: this.post.id,
            category : this.post.postcategory.name

        }
    },

    mounted () {

        console.log(this.$options.name+' component successfully mounted');

        axios.post("/posts/related", this.id, this.category)
            .then(response => (this.relatedPosts = response.data.relatedPosts))
            .catch(error => console.log(error));
    },

    methods: {

    },


    }
    </script>
    <!--STYLES-->
    <style scoped>

Answer 1

尝试:

<div class="sidebar_container" style="">
    <div class="sidebar_stripe_white" style=""></div>
    <related-post-list :post="{{ $classPost->toJson() }}"></related-post-list>
</div>