I'm looking for a less verbose, more elegant way to handle this scenario: we have a few different ways of rendering a post (e.g., full page, modal view, collapsed view, edit mode, etc.) Many methods are shared between them.
Currently, we have a component called Post
that when used passes a context:
<post context="edit" :onCancel="cancelUpdatePost">
and then in the Post.vue
file we have all methods and the component tags rendering based on that context (using v-if
)
<single-post
:post="currPost"
:canEditPost="canEditPost"
:targetPageUrl="targetPageUrl"
:mailToLink="mailToLink"
:onAddComment="addComment"
:onDeleteComment="deleteComment"
:onShowMoreComments="showMoreComments"
:onShowFewerComments="showFewerComments"
:onGoToPost="goToPost"
v-if="context === 'feed'"
/>
<post-full
:post="currPost"
:canEditPost="canEditPost"
:targetPageUrl="targetPageUrl"
:mailToLink="mailToLink"
:postImage="postImage"
:units="units"
:divisionsByType="divisionsByType"
v-if="context === 'permalink'"
/>
(many more versions)
... I'm new to Vue and Vuex, but it seems like there should be a less verbose, easier way?
Aucun commentaire:
Enregistrer un commentaire