Publish Error on Blog>컴포넌트간 함수호출시 refs 속성 사용법

pages/instructor/blog/_id/edit.vue

@@ -9,13 +9,14 @@
         <div class="full-page-takeover-header-button">
           <!-- TODO: Check blog validity before publishing -->
           <Modal
+            @opened="checkBlogValidity"
             openTitle="Publish"
             openBtnClass="button is-success is-medium is-inverted is-outlined"
             title="Review Details">
             <div>
               <div class="title">Once you publish blog you cannot change url to a blog.</div>
               <!-- Check for error -->
-              <div>
+              <div v-if="!publishError">
                 <div class="subtitle">Current Url is:</div>
                 <article class="message is-success">
                   <div class="message-body">
@@ -24,11 +25,11 @@
                   </div>
                 </article>
               </div>
-              <!-- <article class="message is-danger">
+              <article v-else class="message is-danger">
                 <div class="message-body">
-                  Display error here
+                  {{publishError}}
                 </div>
-              </article> -->
+              </article>
             </div>
           </Modal>
         </div>
@@ -52,6 +53,7 @@
           @editorMounted="initBlogContent"
           @editorUpdated="updateBlog"
           :isSaving="isSaving"
+          ref="editor"
         />
       </div>
     </div>
@@ -67,6 +69,11 @@ export default {
   components: {
     Editor, Header, Modal
   },
+  data() {
+    return {
+      publishError: ''
+    }
+  },
   computed : {
     ...mapState({
       blog: ({instructor}) => instructor.blog.item,
@@ -96,6 +103,15 @@ export default {
       }catch(error){
         this.$toasted.error('Blog cannot be saved!', {duration: 2000})
       }
+    },
+    checkBlogValidity() {
+      const title = this.$refs.editor.getNodeValueByName('title')
+      this.publishError = ''
+      if (title && title.length > 24) {
+        // create slug from title
+      } else {
+        this.publishError = 'Cannot publish! Title needs to be longer than 24 characters!'
+      }
     }
   }
 }