src/components/todo.vue

   1 <template>
   2   <div class="hover:bg-indigo-200 py-2">
   3
   4       <input type="checkbox"
   5           name="remember"
   6           :id="data.id"
   7           v-model="data.done"
   8           class="inline-block align-middle w-1/12 h-6 w-6"
   9           @change="onCheckChange(data)"/>
  10
  11
  12       <label class="inline-block align-middle w-10/12" :for="data.id">
  13         <input class="bg-transparent border-b block border-gray-500 mb-2 text-gray-900 focus:outline-none focus:border-indigo-500 pb-1 w-full"
  14               placeholder="やること/やりたいこと"
  15               v-model="data.name"
  16               @change="onTextChange(data)"/>
  17       </label>
  18
  19       <button class="bg-blue-500 w-10 h-10 p-3 ml-3 text-sm font-bold tracking-wider text-white rounded-full hover:bg-red-600 inline-flex items-center justify-center"
  20           @click="onDelete(data)">
  21          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
  22           <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
  23           <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
  24         </svg>
  25       </button>
  26
  27   </div>
  28 </template>
  29
  30 <script>
  31
  32 export default {
  33   name: 'todo',
  34   props: {
  35     data: Object,
  36   },
  37   methods: {
  38     onCheckChange(data) {
  39       this.$emit("onCheckChange", data)
  40     },
  41     onTextChange(data) {
  42       this.$emit("onTextChange", data)
  43     },
  44     onDelete(data){
  45       this.$emit("onDelete", data)
  46     }
  47   },
  48   data() {
  49     return {
  50     }
  51   },
  52 }
  53 </script>
  54
  55 <!-- Add "scoped" attribute to limit CSS to this component only -->
  56 <style scoped>
  57
  58 </style>