チャット画面を作り込んで行こう

s-yoshiii · Jul 9, 2022 · 74b4c02 · 74b4c02
1 parent b1f809d
commit 74b4c02
Showing 1 changed file with 20 additions and 3 deletions.
diff --git a/src/views/ChatBoard.vue b/src/views/ChatBoard.vue
@@ -14,9 +14,9 @@
                     </v-list-item-avatar>
 
                     <v-list-item-content>
-                      <v-list-item-title>Message {{ n }}</v-list-item-title>
+                      <!-- <v-list-item-title>Message {{ n }}</v-list-item-title> -->
 
-                      <v-list-item-subtitle>
+                      <v-list-item-subtitle class="message">
                         Lorem ipsum dolor sit amet, consectetur adipisicing
                         elit. Nihil repellendus distinctio similique
                       </v-list-item-subtitle>
@@ -34,14 +34,26 @@
           </v-col>
         </v-row>
       </v-container>
+      <v-textarea
+        class="mx-2"
+        label="メッセージを入力する"
+        rows="1"
+        append-icon="mdi-comment"
+        auto-grow
+      ></v-textarea>
     </v-main>
   </v-app>
 </template>
 
 <script>
 export default {
+  created() {
+    this.user_id = this.$route.query.user_id;
+    console.log("user_id", this.user_id);
+  },
   data: () => ({
-    cards: ["Today", "Yesterday"],
+    user_id: "",
+    cards: ["Today"],
     drawer: null,
     links: [
       ["mdi-inbox-arrow-down", "Inbox"],
@@ -52,3 +64,8 @@ export default {
   }),
 };
 </script>
+<style>
+.message {
+  text-align: left;
+}
+</style>