반응형
v-show 를 통해서 오류가 있는 경우 보여주는 예제 코드입니다.
onAdd 가 실행될 때마다 todo.value를 체크하여 아무것도 없다면 errorMessage에 오류 문장을 입력합니다. errorMessage에 데이터가 있으면 표시되도록 v-show를 사용했습니다.
<template>
<div class="container">
<h2>TO DO</h2>
<form
@submit.prevent="onAdd"
class="d-flex"
>
<div class="flex-grow-1 mr-1">
<input
class="form-control"
type="text"
v-model="todo"
placeholder="할일을 입력하세요."
/>
</div>
<div>
<button
class="btn btn-primary"
type="submit"
>
추가
</button>
</div>
</form>
<div v-show="errorMessage!==''" class="card mt-10">
<div class="card-body p-2">
{{ errorMessage }}
</div>
</div>
<div
v-for="todo in todos"
:key="todo.id"
class="card mt-10"
>
<div class="card-body p-2">
{{ todo.subject }}
</div>
</div>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const todo = ref("")
const todos = ref([])
const errorMessage = ref("")
const onAdd = () => {
if(todo.value === ''){
errorMessage.value = "아무것도 입력하지 않았습니다."
} else {
todos.value.push({
id: Date.now(),
subject: todo.value
})
todo.value = ""
errorMessage.value = ""
}
}
return {
todo,
todos,
errorMessage,
onAdd
}
}
}
</script>
반응형
'코딩 프로그래밍 > Javascript 자바스크립트' 카테고리의 다른 글
Vue style 동적 바인딩 할당 (0) | 2023.04.03 |
---|---|
Vue 배열 이용한 체크박스 바인딩 (0) | 2023.04.03 |
Vue 조건 v-show v-if (0) | 2023.04.03 |
Vue v-for 할일 목록 만들어 배열에 넣기 (0) | 2023.04.03 |
Vue 데이터 바인딩 input v-model (0) | 2023.04.03 |
댓글