Vue - Computed

계산된 속성

할 일 목록

• 각 할 일에 토글 기능을 추가
• 각 할 일 객체에 done 속성을 추가하고, v-model을 사용하여 체크박스에 바인딩함으로써 작동

template
<li v-for="todo in todos">
  <input type="checkbox" v-model="todo.done">
  ...
</li>

다음 개선 사항: 이미 완료된 할 일을 숨길 수 있는 기능을 추가

이미 hideCompleted 상태를 토글하는 버튼이 있습니다. 하지만 그 상태를 바탕으로 목록 내 항목을 어떻게 렌더링해야 할까요?

computed()

반응 데이터 소스를 기반으로 .value를 계산하는 계산된 참조(ref)를 만들 수 있다.

import { ref, computed } from 'vue'

const hideCompleted = ref(false)
const todos = ref([
  /* ... */
])

const filteredTodos = computed(() => {
  // `todos.value` 및 `hideCompleted.value`를
  // 기반으로 필터링된 할 일을 반환.
})

- <li v-for="todo in todos">
+ <li v-for="todo in filteredTodos">

계산된 속성은 계산에 사용된 다른 반응형 상태를 의존성으로 추적
결과를 캐시하고 의존성이 변경되면 자동으로 업데이트

이제 계산된 속성 filteredTodos을 추가하고, 계산되는 로직을 구현해 봅시다!
올바르게 구현된 경우, 완료된 항목 숨기기 상태일 때 할 일을 체크하면 즉시 숨겨져야 합니다.

<script setup>
import { ref, computed } from 'vue'

let id = 0

const newTodo = ref('')
const hideCompleted = ref(false)
const todos = ref([
  { id: id++, text: 'HTML 배우기', done: true },
  { id: id++, text: 'JavaScript 배우기', done: true },
  { id: id++, text: 'Vue 배우기', done: false }
])

const filteredTodos = computed(() => {
  return hideCompleted.value
    ? todos.value.filter((t) => !t.done)
    : todos.value
})

function addTodo() {
  todos.value.push({ id: id++, text: newTodo.value, done: false })
  newTodo.value = ''
}

function removeTodo(todo) {
  todos.value = todos.value.filter((t) => t !== todo)
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" required placeholder="new todo">
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in filteredTodos" :key="todo.id">
      <input type="checkbox" v-model="todo.done">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
  <button @click="hideCompleted = !hideCompleted">
    {{ hideCompleted ? 'Show all' : 'Hide completed' }}
  </button>
</template>

<style>
.done {
  text-decoration: line-through;
}
</style>

뷰 듀토리얼