Question

我对Vue并不陌生，遇到了一些困难，我创建了一个组件，该组件将接收post变量作为道具，当该组件通过axios POST进行安装以获取它时，请求其他与该帖子相关的帖子（相同类别，但ID不同收到的道具）。

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

https://i.imgur.com/K1xCvqX.png

在浏览器的surce代码查看器中：

https://i.imgur.com/Ynw3uMU.png

这是我刀片服务器模板中的组件（注意我如何使用@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>

Vue组件无法正确显示

1 个答案: