Javascript 另一方面，使用vuejs 3和firebase不会显示帖子的标签标题和内容

我不熟悉

vuejs 3

，我使用了

vuejs 3

和

firebase

，我创建了一个

posts.vue

组件和一个

OnePost.vue

组件，该组件显示

posts

，以及

getPosts.js

，该组件允许检索

posts

，和显示每个

帖子的详细信息的
show.vue
，以及允许您检索单个
帖子的详细信息的
getOnePost.js
，这里的问题是
span
中
帖子的
标签
当我写
{{post.tags}}
时显示，它显示如下
[“前端”、“后端”、“完整堆栈”]

视图/帖子.vue

<template lang="">
    <h1>list of posts</h1>
    <div class="row">
        <div class="col-md-6" v-for="post in posts" :key="post.id">
            <OnePost :post="post"/>
        </div>
    </div>
    
</template>
<script>
import OnePost from '../components/OnePost'
import loadPosts from './../composables/posts/getPosts'
export default {
    components: { OnePost },
    setup() {

        const { posts,error,load } = loadPosts();

        load();

        return { posts }

    }
    
}
</script>

<template lang="">
    <h2 @click="show = !show">{{ post.title }}</h2>
    <div v-if="show">
        <div class="well">
            <p>{{ extract }}</p>
            <p>{{ post.tags }}</p>
            <div class="well">
                <span v-for="tag in post.tags" class="badge badge-primary mr-2">
                    #{{ tag }}
                </span>
            </div>
            <div class="my-3">
                <router-link :to="{ name: 'Show-post',params:{id: post.id} }" class="btn btn-sm btn-info">
                    Show
                </router-link>
                <button class="btn btn-sm btn-warning ml-2">Edit</button>
                <button class="btn btn-sm btn-danger ml-2">Delete</button>
            </div>
        </div>
    </div>
</template>
<script>
import { computed, ref } from 'vue'
export default {
    props: ['post'],
    setup(props){

        const show = ref(true)

        const extract = computed(() => props.post.content.substring(0, 50) + '...')

        return { extract, show }

    }
    
}
</script>

<template lang="">
    <div>
        <h1>{{ post.title }}</h1>
        <p>{{ post.content }}</p>
    </div>
</template>
<script>
import { useRoute } from 'vue-router'
import getOnePost from './../composables/posts/getOnePost.js'
export default {
    setup() {
        const route = useRoute();

        const { post,error,load } = getOnePost();
        const id = route.params.id;
        load(id)

        return { post }
    }
    
}
</script>

show.vue

<template lang="">
    <h1>list of posts</h1>
    <div class="row">
        <div class="col-md-6" v-for="post in posts" :key="post.id">
            <OnePost :post="post"/>
        </div>
    </div>
    
</template>
<script>
import OnePost from '../components/OnePost'
import loadPosts from './../composables/posts/getPosts'
export default {
    components: { OnePost },
    setup() {

        const { posts,error,load } = loadPosts();

        load();

        return { posts }

    }
    
}
</script>

<template lang="">
    <h2 @click="show = !show">{{ post.title }}</h2>
    <div v-if="show">
        <div class="well">
            <p>{{ extract }}</p>
            <p>{{ post.tags }}</p>
            <div class="well">
                <span v-for="tag in post.tags" class="badge badge-primary mr-2">
                    #{{ tag }}
                </span>
            </div>
            <div class="my-3">
                <router-link :to="{ name: 'Show-post',params:{id: post.id} }" class="btn btn-sm btn-info">
                    Show
                </router-link>
                <button class="btn btn-sm btn-warning ml-2">Edit</button>
                <button class="btn btn-sm btn-danger ml-2">Delete</button>
            </div>
        </div>
    </div>
</template>
<script>
import { computed, ref } from 'vue'
export default {
    props: ['post'],
    setup(props){

        const show = ref(true)

        const extract = computed(() => props.post.content.substring(0, 50) + '...')

        return { extract, show }

    }
    
}
</script>

<template lang="">
    <div>
        <h1>{{ post.title }}</h1>
        <p>{{ post.content }}</p>
    </div>
</template>
<script>
import { useRoute } from 'vue-router'
import getOnePost from './../composables/posts/getOnePost.js'
export default {
    setup() {
        const route = useRoute();

        const { post,error,load } = getOnePost();
        const id = route.params.id;
        load(id)

        return { post }
    }
    
}
</script>

由于post是异步获取的，因此在第一次渲染时将未定义
post.tags
，要解决此问题，必须使用条件渲染检查属性是否可用
v-if=“post.tags”
：


#{{tag}}