mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
d511d6aa78
- Remove duplicate queries - Use smart query in pages/post/_id/_slug/index.vue to avoid multiple db requests for a post and its comments. We cannot update the apollo cache with asyncData and smart queries have a prefetch policy set to true by default, which means that they will resolve in a similar timeframe. https://stackoverflow.com/questions/55885337/in-nuxt-should-i-use-asyncdata-or-default-apollo-queries https://vue-apollo.netlify.com/api/smart-query.html#options https://vue-apollo.netlify.com/guide/ssr.html#vue-cli-plugin
45 lines
1.0 KiB
Vue
45 lines
1.0 KiB
Vue
<template>
|
|
<div id="comments">
|
|
<h3 style="margin-top: -10px;">
|
|
<span>
|
|
<ds-icon name="comments" />
|
|
<ds-tag
|
|
v-if="post.comments"
|
|
style="margin-top: -4px; margin-left: -12px; position: absolute;"
|
|
color="primary"
|
|
size="small"
|
|
round
|
|
>
|
|
{{ post.comments.length }}
|
|
</ds-tag>
|
|
Comments
|
|
</span>
|
|
</h3>
|
|
<ds-space margin-bottom="large" />
|
|
<div v-if="post.comments && post.comments.length" id="comments" class="comments">
|
|
<comment
|
|
v-for="(comment, index) in post.comments"
|
|
:key="comment.id"
|
|
:comment="comment"
|
|
:post="post"
|
|
@deleteComment="post.comments.splice(index, 1)"
|
|
/>
|
|
</div>
|
|
<hc-empty v-else name="empty" icon="messages" />
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Comment from '~/components/Comment.vue'
|
|
import HcEmpty from '~/components/Empty.vue'
|
|
|
|
export default {
|
|
components: {
|
|
Comment,
|
|
HcEmpty,
|
|
},
|
|
props: {
|
|
post: { type: Object, default: () => {} },
|
|
},
|
|
}
|
|
</script>
|