diff options
| -rw-r--r-- | plugins/vue/demo/components/chat.js | 61 | ||||
| -rw-r--r-- | plugins/vue/demo/components/name.js | 13 | ||||
| -rw-r--r-- | plugins/vue/demo/index.html | 12 |
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> |