노션 프로젝트 (5)

포스터 넣기

// workspace.vue
<section :key="$route.params.id">
<div class="poster">
      <img
        v-if="workspaceStore.workspace.poster"
        :src="workspaceStore.workspace.poster"
        alt="Poster" />
      <input 
        type="file"
        @change="selectImage" />
    </div>


// 메소드 추가

selectImage(event) {
      const { files }= event.target
      for (const file of files) {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.addEventListener('load', e => {
          this.workspaceStore.updateWorkspace({
						id: this.$route.params.id,
            poster: e.target.result
          })
        })
      }
    }

// poster 추가
async updateWorkspace(payload) {
      const { id, title, content, poster } = payload
      await fetch(`${URL}/${id}`, {
        method: 'PUT',
        headers: {
          'content-type': 'application/json',
          'apikey': '',
          'username': ''
        },
        // 데이터 받아줄 body
        body: JSON.stringify({
          title,
          content,
          poster
        })
      })

포스터 삭제

<button @click="deletePoster">
      이미지 삭제!
</button>

deletePoster() {
    this.workspaceStore.updateWorkspace({
      id: this.$route.params.id,
      poster: '-1'
    })
  }

제목 경로

workspace.js 파일 내부에 라우터를 가져온다.
현재 페이지에 대한 $route 를 사용

findWorkspacePath(currentWorkspaceId) {
      // $route = currentRoute.value
      // const currentWorkspaceId = router.currentRoute.value.params.id
      const find = (workspace, parents) => {
        if (currentWorkspaceId === workspace.id) {
          this.currentWorkspacePath = [...parents, workspace]
        }
        if (workspace.children) {
          workspace.children.forEach(ws => {
            find(ws, [...parents, workspace])
          })
        }
      }
      this.workspaces.forEach(workspace => {
        find(workspace, [])
      })
    }

강의 다시 보고 내용 더 추가하기!