diff options
Diffstat (limited to 'src/components/group/GroupSender.vue')
-rw-r--r-- | src/components/group/GroupSender.vue | 67 |
1 files changed, 67 insertions, 0 deletions
diff --git a/src/components/group/GroupSender.vue b/src/components/group/GroupSender.vue new file mode 100644 index 0000000..160ca76 --- /dev/null +++ b/src/components/group/GroupSender.vue | |||
@@ -0,0 +1,67 @@ | |||
1 | <template> | ||
2 | <div class="group_view"> | ||
3 | <h1> {{group.name}} </h1> | ||
4 | <div class="messages"> | ||
5 | <Message v-for="message in messages" :key="message.id" :message="message" /> | ||
6 | </div> | ||
7 | |||
8 | <form @submit="send_message"> | ||
9 | <input v-model="message" type="text" ref="input" /> | ||
10 | </form> | ||
11 | </div> | ||
12 | </template> | ||
13 | |||
14 | <script> | ||
15 | import Message from '@/components/group/Message.vue' | ||
16 | import ChatService from '@/services/ChatService.js' | ||
17 | |||
18 | export default { | ||
19 | data() { | ||
20 | return { | ||
21 | message: "", | ||
22 | messages: [] | ||
23 | } | ||
24 | }, | ||
25 | |||
26 | props: { | ||
27 | group: Object | ||
28 | }, | ||
29 | |||
30 | methods: { | ||
31 | close() { | ||
32 | this.$emit('close') | ||
33 | }, | ||
34 | |||
35 | send_message(e) { | ||
36 | e.preventDefault() | ||
37 | console.log(this.message) | ||
38 | this.message = "" | ||
39 | }, | ||
40 | |||
41 | async get_messages() { | ||
42 | let {status, data} = await ChatService.get_group_messages(this.group.id) | ||
43 | |||
44 | console.log(data) | ||
45 | |||
46 | if(status===200) | ||
47 | this.messages = data.messages | ||
48 | } | ||
49 | }, | ||
50 | |||
51 | components: { | ||
52 | Message | ||
53 | }, | ||
54 | |||
55 | created() { | ||
56 | this.$nextTick(function () { | ||
57 | this.$refs.input.focus() | ||
58 | |||
59 | this.get_messages() | ||
60 | }) | ||
61 | } | ||
62 | } | ||
63 | </script> | ||
64 | |||
65 | <style scoped> | ||
66 | |||
67 | </style> | ||