반응형
1. PostAddForm.vue
- computed에 isContentsValid() 함수 생성 return this.contents.length < 200;
- v-if="!isContentsValid"로 textarea 글자수가 200이 넘어가면 경고문구 뜨게 구현
<template>
<div class="contents">
<h1 class="page-header">Create Posts</h1>
<div class="form-wrapper">
<form class="form" @submit.prevent="submitForm">
<div>
<label for="title">Title : </label>
<input id="title" type="text" v-model="title" />
</div>
<div>
<label for="contents">Contents : </label>
<textarea
name=""
id="contents"
cols="30"
rows="5"
v-model="contents"
></textarea>
<p v-if="!isContentsValid" class="validation-text warning">
Contents must be lese than 250
</p>
</div>
<button type="submit" class="btn">Create</button>
</form>
<p class="log">{{ this.logMessage }}</p>
</div>
</div>
</template>
<script>
import { createPosts } from '@/api/index';
export default {
data() {
return {
title: '',
contents: '',
logMessage: '',
};
},
computed: {
isContentsValid() {
return this.contents.length < 200;
},
},
mounted() {},
methods: {
async submitForm() {
try {
const response = await createPosts({
title: this.title,
contents: this.contents,
});
console.log('submit');
console.log(response);
} catch (error) {
// 에러처리
console.log(error.response.data.message);
this.logMessage = error.response.data.message;
}
},
},
};
</script>
<style scoped>
.form-wrapper .form {
width: 100%;
}
.btn {
color: #fff;
}
</style>
반응형
'vue.js > vue.js 2' 카테고리의 다른 글
129. posts 삭제 API 구현 | 삭제 후 list UX 개선 (0) | 2023.02.19 |
---|---|
128. auth, posts API 함수 분할 | js파일 분리 | 로그인 회원가입, Post CRUD API 분리 (0) | 2023.02.19 |
126. 학습노트 등록 API 구현 | 학습노트 등록 Page Router 생성 (0) | 2023.02.19 |
125. 페이지로 이동 버튼 생성 | icoicons 아이콘 적용 방법 (0) | 2023.02.19 |
124. cookies에 Login정보 저장 | store actions 으로 코드 리팩토링 (0) | 2023.02.19 |