vueでcomしたものだけを表示する方法

computedを使い、　変更があった場合に自動で変更させるようにする

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

let id = 0

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

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)
}
  
const filterdtodos = computed(() => {
  return hideCompleted.value ?
    todos.value.filter((t) => t.done === false) :
    todos.value
})
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo">
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in filterdtodos" :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>

watchとほぼ同じだが、computedはキャッシュされる。 htmlに反映されない系をwatchでやった方が良いと思う。 computedはメモ化されて再連打を防ぐ

また、return で戻り値を返しますよ宣言して、 ３項演算子で　条件 ? true : flase で書けばスマートに書ける

filterを上手く使えば良い

こういう書き方をすると、donegafalseのものだけ集めてくれる。 filterがtrueのものを返す、!が真偽値を反転させるからこうなる

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