Vue.set 사용법 및 용도 > Vue 에서 배열처리 방법

pages/instructor/blogs/index.vue

@@ -54,6 +54,7 @@
                 <div 
                   v-for="pBlog in published"
                   :key="pBlog._id"
+                  :class="{featured: pBlog.featured}"
                   class="blog-card">
                   <h2>{{displayBlogTitle(pBlog)}}</h2>
                   <div class="blog-card-footer">
@@ -116,8 +117,14 @@ export default {
         this.updateBlog(blog)
       }
     },
-    updateBlog(blog) {
-      this.$store.dispatch('instructor/blog/updatePublishedBlog')
+    async updateBlog(blog) {
+      // this.$store.dispatch('instructor/blog/updatePublishedBlog')
+      const featured = !blog.featured
+      const featureStatus = featured ? 'Featured' : 'Un-Featured'
+      const result = await this.$store.dispatch('instructor/blog/updatePublishedBlog', {id: blog._id, data: {featured}})
+      if(result.isAxiosError !== true){
+        this.$toasted.success(`Blog has been ${featureStatus}!`, {duration: 2000})
+      }
     },
     publishedOptions(isFeatured) {
       return createPublishedOptions(isFeatured)
@@ -160,7 +167,7 @@ export default {
       color: rgba(0, 0, 0, 0.54);
     }
     &.featured {
-      border-left: 5px solid #3cc314;
+      border-left: 8px solid #3cc314;
       padding-left: 10px;
       transition: border ease-out 0.2s;
     }

store/instructor/blog.js

@@ -1,3 +1,5 @@
+import Vue from 'vue'
+
 function separateBlogs(blogs) {
   const published = []
   const drafts = []
@@ -66,15 +68,24 @@ export const actions = {
     commit('deleteBlog', {resource, index})
     return true
   },
-  updatePublishedBlog(blog) {
-    alert('FEATURING BLOG')
+
+  async updatePublishedBlog({commit, state}, {id, data}) {
+    const blog = await this.$axios.$patch(`/api/v1/blogs/${id}`, data)
+    if(blog.isAxiosError === true){
+      console.log(blog.data)
+      return Error('')
+    }
+    const index = state.items['published'].findIndex(b => b._id === id)
+    commit('setPublishedBlog', {index, blog})
+    return blog
   },
+
   async updateBlog({commit, state}, {data, id}) {
     console.log('instructor/blog.js actions updateBlog call axios.$patch-> Id, data')
     const blog = await this.$axios.$patch(`/api/v1/blogs/${id}`, data)
     if(blog.isAxiosError === true){
       console.log(blog.data)
-      return Error('')
+      return blog
     }
     console.log('instructor/blog.js actions updateBlog done axios.$patch-> Id, data')
     console.log('courses.js mutations call setBlog')
@@ -88,6 +99,12 @@ export const mutations = {
   setBlog(state, blog) {
     state.item = blog
   },
+  setPublishedBlog(state, {index, blog}) {
+    // Vue는 배열에 대해 다음과 같은 변경 사항을 감지할 수 없습니다.
+    // 인덱스로 배열에 있는 항목을 직접 설정하는 경우, 예: vm.items[indexOfItem] = newValue
+    // 배열 길이를 수정하는 경우, 예: vm.items.length = newLength
+    Vue.set(state.items.published, index, blog)
+  },
   setBlogs(state, {resource, items}) {
     state.items[resource] = items
   },