Skip to content
Permalink
Browse files

Refactor Composer.vue with Vue Composition API

  • Loading branch information
marshallswain committed Dec 20, 2019
1 parent 8f457cc commit cd5c8898ede270d5e22f9c6ef1450d3f3c6278c9
Showing with 25 additions and 22 deletions.
  1. +25 −22 src/components/Composer.vue
@@ -1,35 +1,38 @@
<template>
<form
id="send-message"
class="flex flex-row flex-space-between"
@submit.prevent
>
<input v-model="newMessage" type="text" name="text" class="flex flex-1" />
<button class="button-primary" type="submit" @click="addMessage">
<form class="flex flex-row flex-space-between" @submit.prevent="onSubmit">
<input v-model="message.text" type="text" class="flex flex-1" />

<button class="button-primary" type="submit">
Send
</button>
</form>
</template>

<script>
import { ref } from '@vue/composition-api'
export default {
name: 'MessageComposer',
props: {
// eslint-disable-next-line vue/require-default-prop
createMessage: Function
},
data() {
return {
newMessage: ''
setup(props, context) {
const { Message } = context.root.$FeathersVuex.api
const message = ref(new Message({ text: '' }))
function reset() {
message.value = new Message({ text: '' })
}
function onSubmit() {
if (!message.value.text) {
return
}
message.value.save()
reset()
}
},
methods: {
addMessage() {
// Create a new message and then clear the input field
this.createMessage({ text: this.newMessage }).then(this.clearMessage)
},
clearMessage() {
this.newMessage = ''
return {
message,
reset,
onSubmit
}
}
}

0 comments on commit cd5c889

Please sign in to comment.
You can’t perform that action at this time.