vue: board

hwe/ts/components/BoardArticle.vue

@@ -2,15 +2,22 @@
   <table class="articleFrame bg0">
     <thead>
       <tr class="bg1">
-        <th class="authorName"></th>
-        <th class="articleTitle"></th>
-        <th class="date"></th>
+        <th class="authorName">{{ article.author }}</th>
+        <th class="articleTitle">{{ article.title }}</th>
+        <th class="date">{{ article.date }}</th>
       </tr>
     </thead>
     <tbody>
       <tr>
-        <td><img class="authorIcon generalIcon" width="64" height="64" /></td>
-        <td class="text" colspan="2"></td>
+        <td>
+          <img
+            class="authorIcon generalIcon"
+            width="64"
+            height="64"
+            :src="article.author_icon"
+          />
+        </td>
+        <td class="text" colspan="2">{{ article.text }}</td>
       </tr>
     </tbody>
     <tbody class="commentList">
@@ -29,19 +36,26 @@
             type="text"
             maxlength="250"
             placeholder="새 댓글 내용"
-            :value="newCommentText"
+            v-model.trim="newCommentText"
+            @keyup.enter="submitComment"
           />
         </td>
-        <td><button type="button" class="submitComment">등록</button></td>
+        <td>
+          <button type="button" class="submitComment" @click="submitComment">
+            등록
+          </button>
+        </td>
       </tr>
     </tfoot>
   </table>
 </template>
 <script lang="ts">
-import { BoardArticleItem } from "board.vue";
+import { BoardArticleItem } from "../Board.vue";
 import BoardComment from "./BoardComment.vue";
 import { defineComponent, PropType } from "vue";
-
+import axios from "axios";
+import { convertFormData } from "../util/convertFormData";
+import { InvalidResponse } from "../defs";
 export default defineComponent({
   name: "BoardArticle",
   components: {
@@ -58,15 +72,47 @@ export default defineComponent({
       required: true,
     },
   },
+  emits: ["submit-comment"],
   methods: {
-    submitComment() {
-      console.log(this.newCommentText);
+    async submitComment() {
+      const comment = this.newCommentText;
+      if (!comment) {
+        return;
+      }
+      const articleNo = this.article.no;
+
+      let result: InvalidResponse;
+
+      try {
+        const response = await axios({
+          url: "j_board_comment_add.php",
+          method: "post",
+          responseType: "json",
+          data: convertFormData({
+            articleNo: articleNo,
+            text: comment,
+          }),
+        });
+        result = response.data;
+        if (!result.result) {
+          throw result.reason;
+        }
+      } catch (e) {
+        console.error(e);
+        alert(`실패했습니다: ${e}`);
+        return;
+      }
+
+      this.newCommentText = "";
+
+      this.$emit("submit-comment");
     },
   },
-  /*
-  setup(props) {
-    toRef(props, "article");
-  },
-  */
 });
 </script>
+
+<style>
+td.text {
+  white-space: pre;
+}
+</style>