inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"

Events

상세질문: Date.now() : not working

232

bluescreen

작성한 질문수 24

0

 

<template>
	<div>
		<h2>게시글 등록</h2>
		<hr class="my-4" />
		<form @submit.prevent="save">
			<div class="mb-3">
				<label for="title" class="form-label">제목</label>
				<input
					v-model="form.title"
					type="text"
					class="form-control"
					id="title"
				/>
			</div>
			<div class="mb-3">
				<label for="content" class="form-label">내용</label>
				<textarea
					v-model="form.content"
					class="form-control"
					id="content"
					rows="3"
				></textarea>
			</div>

			<div class="pt-4">
				<buttont
					type="button"
					class="btn btn-outline-dark me-2"
					@click="goListPage"
					>목록</buttont
				>
				<button class="btn btn-primary">저장</button>
			</div>
		</form>
	</div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { createPost } from '@/api/posts';

const router = useRouter();
const form = ref({
	title: null,
	content: null,
});

const save = () => {
	try {
		createPost({
			...form.value,
			createdAt: Date.now(),
		});
		router.push({ name: 'PostList' });
	} catch (error) {
		console.log(error);
	}
};

const goListPage = () => router.push({ name: 'PostList' });
</script>

<style lang="scss" scoped></style>

index.js 에서는

{
		path: '/posts',
		name: 'PostList',
		component: PostListView,
	},

.. 로 정의 했고요

 

api/posts.js

 

export function createPost(data) {
	return axios.post('http://localhost:5000/posts', data);
}

※ PostCreateView.vue 에서 save 함수는

const save = () => {
	try {
		createPost({
			...form.value,
			createdAt: Date.now(),
		});
		router.push({ name: 'PostList' });
	} catch (error) {
		console.log(error);
	}
};

위 전체 소스 중 위 부분입니다.

 

크게 복잡한 내용이 아니라고 생각되고 있는데 ..

코딩님 위에 내용 보시고 혹시 더 확인하고 싶은 부분이 있으시면 말씀해 주세요.

확인 하고 다시 질문 드리겠습니다.

번거롭게 해드려 죄송하네요. 감사합니다.


 

 

 

 

 

vue.js

답변 1

0

짐코딩

다른 질문에서 답변드렸습니다.

참고로 해당 코드에서 createPost()메서드 호출시 async/await이 누락되었습니다.

0

bluescreen

답변 정말 감사드립니다. ('오타' 보다 '원인'을 알게 해주셨읍니다.)

전 다음 강의 들으러.... 그럼 2000 ^^;

npm init vue@3.1.9

0

43

2

크롭 웹스토어 vue devtools 설치 관련

0

43

1

snippets 작성하는 부분 설명이 있었나요?

0

51

2

computed 의 set 함수를 통해 const 변수에 값을 담는 부분

0

58

2

소스 공유 어디서 해야하는지 궁금합니다

0

62

2

component 등록과 사용

0

59

2

강의교안

0

58

2

eslint 룰 관련 질문이 있습니다.

0

67

2

npm init -y 명령어 실행에 관한 질문

1

156

2

volar 가 마켓플레이스에 검색되지 않아 vue(official)을 설치했습니다.

1

169

2

깊은 감시자 질문

0

89

2

정리된 내용

0

157

2

화면이 왜 이렇게 뜨는걸까요?

0

188

2

왜 다르게 뜰까요..?ㅠㅠ

0

158

2

npm init vue , npm create vue@latest 명령 오류

0

295

2

강의를 듣다보니 궁금한 점 질문드립니다.

0

144

2

watch강의 질문

0

153

1

강의 듣다가 질문드립니다.

0

122

1

이벤트 처리 부분 강의 실습

0

141

2

v-pre는 설명이 없나요?

0

154

2

AppCard.vue 만들다 말고 오류가 갑자기 엄청 뜹니다

0

147

1

개발자도구 Vue 탭 관련 문의

0

241

2

강의를 인텔리제이로 수업따라가도 되져?

0

179

2

API 사용시 자동으로 import하는 기능은 어떤것을 설치해야 하나요?

3

282

2