[Vue] todoリスト作成。

Vue のチュートリアルを見て、todoリストを作成しました。

コード

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

// give each todo a unique id
let id = 0;

const newTodo = ref('');

const todos = ref([
  { id: id++, text: 'Learn HTML' },
  { id: id++, text: 'Learn JavaScript' },
  { id: id++, text: 'Learn Vue' },
]);

function addTodo() {
  todos.value.push({ id: id++, text: newTodo.value });
  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 todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>

<style></style>

stackblitz 埋め込み。

チュートリアルの

submit.prevent を、よく分かってませんでしたが、意図しない画面遷移を避けるために使うようです。

Todoの「期限」も付けた。

「期限」も入力できるようにしました。

VueDatePicker を使っています。

時間は不要なので、日付だけ設定できるようにしたいと思いましたが、
なかなか、検索しても出てきません。
旧バージョンのやり方の記事がHITして、苦戦しました。
最新のバージョンでは、以下のように書くようです。

:time-config="{ enableTimePicker: false }"

コード

<script setup>
import { reactive, ref } from 'vue';
import { useLocalStorage } from '@vueuse/core';

import { VueDatePicker } from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';

const date = ref();
const format = (args) => {
  return `${args.getFullYear()}年${args.getMonth() + 1}月${args.getDate()}日`;
};

// give each todo a unique id
let id = 0;

const newTodo = ref('');
const newTodoTime = ref('');

const todos = ref([
  { id: id++, text: 'Learn HTML', time: '10/10' },
  { id: id++, text: 'Learn JavaScript', time: '10/22' },
  { id: id++, text: 'Learn Vue', time: '10/23' },
]);

function addTodo() {
  todos.value.push({ id: id++, text: newTodo.value, time: newTodoTime.value });
  newTodo.value = '';
  newTodoTime.value = '';
}

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

<template>
  <form @submit.prevent="addTodo">
    <p><input v-model="newTodo" required placeholder="Todo" /></p>
    <p>
      <VueDatePicker
        v-model="newTodoTime"
        format="yyyy/MM/dd"
        model-type="yyyy-MM-dd"
        :time-config="{ enableTimePicker: false }"
      >
      </VueDatePicker>
    </p>
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}, 期限：{{ todo.time }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>

<style></style>

stackblitz 埋め込み。