mardi 2 janvier 2018

A better way to render Vue.js component variations (besides context)

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