チャット送信を実装しよう

s-yoshiii · Jul 11, 2022 · 0736604 · 0736604
1 parent 74b4c02
commit 0736604
Showing 1 changed file with 35 additions and 7 deletions.
diff --git a/src/views/ChatBoard.vue b/src/views/ChatBoard.vue
@@ -8,24 +8,21 @@
               <v-subheader>{{ card }}</v-subheader>
 
               <v-list two-line>
-                <template v-for="n in 6">
-                  <v-list-item :key="n">
+                <template v-for="(data, index) in messages">
+                  <v-list-item :key="index">
                     <v-list-item-avatar color="grey darken-1">
                     </v-list-item-avatar>
 
                     <v-list-item-content>
-                      <!-- <v-list-item-title>Message {{ n }}</v-list-item-title> -->
-
                       <v-list-item-subtitle class="message">
-                        Lorem ipsum dolor sit amet, consectetur adipisicing
-                        elit. Nihil repellendus distinctio similique
+                        {{ data.message }}
                       </v-list-item-subtitle>
                     </v-list-item-content>
                   </v-list-item>
 
                   <v-divider
                     v-if="n !== 6"
-                    :key="`divider-${n}`"
+                    :key="`divider-${index}`"
                     inset
                   ></v-divider>
                 </template>
@@ -40,7 +37,12 @@
         rows="1"
         append-icon="mdi-comment"
         auto-grow
+        v-model="body"
       ></v-textarea>
+      <v-btn class="mr-4" type="submit" :disabled="invalid" @click="submit">
+        submit
+      </v-btn>
+      <v-btn @click="clear"> clear </v-btn>
     </v-main>
   </v-app>
 </template>
@@ -52,6 +54,14 @@ export default {
     console.log("user_id", this.user_id);
   },
   data: () => ({
+    messages: [
+      { message: "message1" },
+      { message: "message2" },
+      { message: "message3" },
+      { message: "message4" },
+      { message: "message5" },
+    ],
+    body: "",
     user_id: "",
     cards: ["Today"],
     drawer: null,
@@ -61,7 +71,25 @@ export default {
       ["mdi-delete", "Trash"],
       ["mdi-alert-octagon", "Spam"],
     ],
+    // invalid: false,
   }),
+  computed: {
+    invalid() {
+      if (!this.body) {
+        return true;
+      }
+      return false;
+    },
+  },
+  methods: {
+    clear() {
+      this.body = "";
+    },
+    submit() {
+      this.messages.unshift({ message: this.body });
+      this.body = "";
+    },
+  },
 };
 </script>
 <style>