On gists

Ben Hong - One object to rule them all

Vue.js

obj.vue Raw #

<!-- https://www.vuemastery.com/courses/component-design-patterns/one-object-to-rule-them-all -->

<!-- To heavy , to complicated, all props we dont need ...-->
<template>
  <main>
    <Component 
      v-for="content in apiResponse"
      :key="content.id"
      :is="content.type"
      :article-title="content.title"
      :article-content="content.body"
      :ad-image="content.image"
      :ad-heading="content.heading"
      @click="content.type === 'NewsArticle' ? openArticle : openAd"
      @mouseover="content.type === 'NewsArticle' ? showPreview : trackAdEvent"
    />
  </main>
</template>


<!--Much better -->
<template>
  <main>
    <Component 
      v-for="content in apiResponse"
      :key="content.id"
      :is="content.type"
      v-bind="feedItem(content).attrs"
      v-on="feedItem(content).events"
    />
  </main>
</template>

<script>
export default {
  methods: {
    feedItem(item) {
      if (item.type === 'NewsArticle') {
        return {
          attrs: {
            'article-title': item.title,
            'article-content': item.content
          },
          events: {
            click: this.openArticle,
            mouseover: this.showPreview
          }
        }
      } else if (item.type === 'NewsAd') {
        return {
          attrs: {
            'ad-image': item.image,
            'ad-heading': item.heading
          },
          events: {
            click: this.openAd,
            mouseover: this.trackAdEvent
          }
        }
      }
    }
  }
}
</script>

shorten.vue Raw #

<img v-bind="{ src: imageAttrs.src, alt: imageAttrs.text }" />
<img v-bind="imageAttrs" />


<template>
  <img v-on:click="openGallery" v-on:mouseover="showTooltip" />
</template>

<script>
export default {
  methods: {
    openGallery() { ... },
    showTooltip() { ... }
  }
}
</script>

<!-- //////////////////////////////  -->

<template>
  <img v-on="{ click: openGallery, mouseover: showTooltip }" />
</template>

<template>
  <img v-on="inputEvents" />
</template>

<script>
export default {
  computed: {
    inputEvents: {
      click: this.openGallery,
      mouseover: this.showTooltip
    }
  },
  methods: {
    openGallery() { ... },
    showTooltip() { ... }
  }
}
</script>