🙄
VueでTo Do Listを作ってみる-2
🙄

VueでTo Do Listを作ってみる-2

目標: inputに値を入れると画面に表示される
 
// src/App.vue

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

const text = ref('')
</script>

<template>
  <p>{{ text }}</p>
  <input v-model="text" />
</template>

<style scoped></style>
 
以前作ったApp.vueを修正します。
 
まず、変数textをnewToDoに変更します。
そしてto doを入れるto Dosも作成します。
// src/App.vue

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

const newToDo = ref('')
const toDos = ref([])
</script>

<template>
  <p>{{ text }}</p>
  <input v-model="newToDo" />
</template>

<style scoped></style>
 
toDosに追加できるようにボタンと関数を作成します。
// src/App.vue

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

const newToDo = ref('')
const toDos = ref([])

const addToDos = () => toDos.value.push(newToDo.value)
</script>

<template>
  <input v-model="newToDo" />
	<button @click="addToDos">+</button>
</template>

<style scoped></style>
ここで順番を逆に新しいto doが上に来るようにしたい方は、以下のように作成してください。
toDos.value.unshift(newToDo.value)
 
toDosに含まれたtoDoをv-forを使って画面に表示します。
// src/App.vue

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

const newToDo = ref('')
const toDos = ref([])

const addToDos = () => toDos.value.push(newToDo.value)
</script>

<template>
  <input v-model="newToDo" />
	<button @click="addToDos">+</button>
	<div v-for="(toDo, index) in toDos" :key="index">
	    <p>{{ toDo }}</p>
  </div>
</template>

<style scoped></style>
 
そして、ボタンを押したときにinputの値が初期化されるようにコードを追加します。
// src/App.vue

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

const newToDo = ref('')
const toDos = ref([])

const addToDos = () => {
  toDos.value.push(newToDo.value)
  newToDo.value = ''
}
</script>

<template>
  <input v-model="newToDo" />
	<button @click="addToDos">+</button>
	<div v-for="(toDo, index) in toDos" :key="index">
	    <p>{{ toDo }}</p>
  </div>
</template>

<style scoped></style>
 
 
少しCSS作成してみました。 完成です！
notion image

次の目標

ボタンでもエンターを打ったときもリストに追加されます。 削除ボタンでto doを削除することができます。
リセットもできます。