No wrapping components with graffiti-objects

3 files changed, 40 insertions, 46 deletions

diff --git a/plugins/vue/demo/components/chat.js b/plugins/vue/demo/components/chat.js
index 800ac45..b8537db 100644
--- a/plugins/vue/demo/components/chat.js
+++ b/plugins/vue/demo/components/chat.js
@@ -4,25 +4,22 @@ export default {
 
   components: { Name },
 
-  props: ['tags', 'objects'],
+  props: ['tags'],
 
   data: ()=> ({
     message: ''
   }),
 
-  computed: {
-    messages() {
-      return this.objects
-                 .filter(o=> 
-                   'message' in o &&
-                   'timestamp' in o &&
-                   typeof o.message == 'string' &&
-                   typeof o.timestamp == 'number')
-                 .sortBy('timestamp')
-    }
-  },
-
   methods: {
+    messageObjects(objects) {
+      return objects.filter(o=> 
+                      'message' in o &&
+                      'timestamp' in o &&
+                      typeof o.message == 'string' &&
+                      typeof o.timestamp == 'number')
+                    .sortBy('timestamp')
+    },
+
     sendMessage() {
       if (!this.message) return
       this.$graffitiUpdate({
@@ -35,25 +32,25 @@ export default {
   },
 
   template: `
-    <ul v-for="object in messages">
-      <li>
-        <graffiti-objects :tags="[object._by]" v-slot="{objects}">
-          <name :of="object._by" :objects="objects"></name>
-        </graffiti-objects>:
-
-        {{ object.message }}
-
-        <template v-if="object._by==$graffitiID.value">
-          <button @click="object.message+='!!';object._update()">
-            ‼️
-          </button>
-
-          <button @click="object._remove()">
-            ❌
-          </button>
-        </template>
-      </li>
-    </ul>
+    <graffiti-objects :tags="tags" v-slot="{objects}">
+      <ul v-for="object in messageObjects(objects)">
+        <li>
+          <name :of="object._by"></name>
+
+          {{ object.message }}
+
+          <template v-if="object._by==$graffitiID.value">
+            <button @click="object.message+='!!';object._update()">
+              ‼️
+            </button>
+
+            <button @click="object._remove()">
+              ❌
+            </button>
+          </template>
+        </li>
+      </ul>
+    </graffiti-objects>
 
     <form @submit.prevent="sendMessage">
       <input v-model="message">
diff --git a/plugins/vue/demo/components/name.js b/plugins/vue/demo/components/name.js
index ec1de62..7189349 100644
--- a/plugins/vue/demo/components/name.js
+++ b/plugins/vue/demo/components/name.js
@@ -1,10 +1,10 @@
 export const Name = {
 
-  props: ["of", "objects"],
+  props: ["of"],
 
-  computed: {
-    name() {
-      const nameObjects = this.objects
+  methods: {
+    name(objects) {
+      const nameObjects = objects
                  .filter(o=> 
                    'name' in o &&
                    'of' in o &&
@@ -20,7 +20,10 @@ export const Name = {
     }
   },
 
-  template: '{{name}}'
+  template: `
+    <graffiti-objects :tags="[of]" v-slot="{objects}">
+      {{ name(objects) }}
+    </graffiti-objects>`
 }
 
 export const SetMyName = {
diff --git a/plugins/vue/demo/index.html b/plugins/vue/demo/index.html
index 9b51f6d..6f0fb71 100644
--- a/plugins/vue/demo/index.html
+++ b/plugins/vue/demo/index.html
@@ -44,10 +44,7 @@
   </h1>
 
   <p>
-    My name is: 
-    <graffiti-objects :tags="[$graffitiID.value]" v-slot="{objects}">
-      <name :of="$graffitiID.value" :objects="objects"></name>
-    </graffiti-objects>
+    My name is: <name :of="$graffitiID.value"></name>
   </p>
 
   <set-my-name :tags="[$graffitiID.value]"></set-my-name>
@@ -58,9 +55,7 @@
     Chatting
   </h1>
 
-  <graffiti-objects :tags="['demo']" v-slot="{objects}">
-    <chat :tags="['demo']" :objects="objects"></chat>
-  </graffiti-objects>
+  <chat :tags="['demo']"></chat>
 
   <!-- Add a like button -->
 
@@ -70,9 +65,8 @@
 
   <!-- different contexts -->
 
-
   <!-- Private messages -->
-
+  
 <!-------------------------------------------------------------->
 </body>
 </html>