Vue 3 Todo code example

<template>

    <div class="fiftycent card" id="tododiv">

            <div class="card-header">
                    CREATE TODO LIST
            </div>

        <ol>
            <li v-for="todo in todos" :key="todo">
                <div class="margin-text"></div>

                <input v-model="todo.done" type="checkbox">  <!-- v-model interact dengan js-->

                <span >{{todo.ayat}}</span> <!-- span ditaruk semasa nak letak checkbox-->
                <!-- refer item .text-->

            </li>
        </ol>

        <!-- input model -->
        <input  v-model='newTodo'
                v-on:keydown.enter='addTodo()'
                type='text'  class="text-box" placeholder="Type something here" > <!--v-on enter to addTodo -->

        <div class="btn-group" role="group" aria-label="Group Button">
                <button v-on:click='addTodo()'
                 type="button" class="btn fm-button">Add</button>

                <button v-on:click='reverseList()'
                type="button" class="btn fm-button-dark">Reverse</button>

        </div>

    </div><!-- function semua dalam div refer id kerja dalam js -->

</template>

<script>
export default {
  data() {
    return {
      // data mula disini
      todos: [
        {
          ayat: "Belajar HTML",
          done: true // done adalah checkbox
        },
        {
          ayat: " belajar Css",
          done: false // ayat: adalah item
        },
        {
          ayat: " belajar Javascript" // ayat: adalah item
        }
      ]
    };
  }, // data default tamat disini

  methods: {
    //add method sini
    addTodo() {
      //add function sini
      this.todos.push({
        //this. refer addTodo
        ayat: this.newTodo, // refer array item di atas
        done: false // item checkbox + boolean condition
      });
      this.newTodo = "";
    },
    reverseList() {
      this.todos.reverse();
    }
  }
}; //method tamat disini
</script>

<style>

</style>