본문 바로가기
코딩 프로그래밍/Javascript 자바스크립트

Vue v-show 적용

by 프즈 2023. 4. 3.
반응형

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>
반응형

댓글