【Vue.js3入門】Composition APIのザックリした使い方解説

├──...
├──src/ 
│   ├── assets/ 
│   ├── components/ 
│       ├──HelloWorld.vue   # <-- 今回不要なので削除します
│       ├──Todos.vue        　 # <-- Child Component 新規追加
│   ├── App.vue    　　　   # <-- Parent Componentとして修正する
│   ├── main.js
│   ├── style.css
├── index.html  
└── ...  

<template>
  <h2>TodoApp @Vue.js v3.5.13</h2>

  <Todos :items="todoItems" @deleteitem="deleteTodoItem" />
  <div class="center">
    <form @submit.prevent="setitem()">
        <div><input type="text" v-model="newtitle" ></div>
        <div><input type="submit" class="submit-button" value="登録"></div>
    </form>
  </div>

</template>

<script>
import Todos from './components/Todos.vue';
import  {reactive, ref}  from 'vue';

export default {
  name: 'App',
  components :{
     Todos
  },
  setup () {
     const count = ref(0);
     const newtitle = ref('');
     const todoItems = reactive([]);
    
     /**登録 */
    const setitem = () =>{
      if(newtitle.value.length <5){
          // console.log(newtitle.value.length)
          if(!newtitle.value){
              alert('Todoアイテムが入っていません')
          }else{
              alert('アイテムの文字数は５文字以上必要です')
          }
          newtitle.value=''
          return
      }

      count.value ++;
      let addItem = {
        id : count.value,
        title : newtitle.value,
        isDone : false
      };

      todoItems.push(addItem);
      newtitle.value = '';

    }

    /**削除 */
    const deleteTodoItem = (itemIdToDelete)=>{
        if(!confirm('削除しますか')){
            return
        }
        const indexToDelete = todoItems.findIndex(item => item.id === itemIdToDelete)
        if (indexToDelete !== -1) {
            todoItems.splice(indexToDelete, 1);
        }
    }

    return{
      count,
      newtitle,
      todoItems,
      setitem,
      deleteTodoItem
    };

  }

}
</script>

<template >
    <div class="center">
        <ul>
            <li v-for="todo in items" :key="todo.id">
                <input type="checkbox" v-model="todo.isDone">
                <span v-bind:class="{done : todo.isDone}">{{todo.title}}</span>
                <button class="delbtn" @click="$emit('deleteitem', todo.id)">[削除]</button>
            </li>
            <li v-show="!items.length " style="text-align: center;">Todo項目はありません</li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'Todos',
    props: {
        items:{
            type: Array,
            required: true
        }
    }
}
</script>