// 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, [])
})
}