diff options
Diffstat (limited to 'plugins/vue/demo/components/chat.js')
| -rw-r--r-- | plugins/vue/demo/components/chat.js | 61 |
1 files changed, 29 insertions, 32 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"> |