Kcko · February 27, 2025 15:49 · Feb 27, 2025 · Feb 27, 2025
diff --git a/obj b/obj
@@ -1 +0,0 @@
-_

diff --git a/obj.vue b/obj.vue
@@ -0,0 +1,64 @@
+<!-- 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>
diff --git a/shorten.vue b/shorten.vue
@@ -0,0 +1,41 @@
+<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>
diff --git a/obj b/obj
@@ -0,0 +1 @@
+_