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

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

目標: 削除ボタンでto doを削除することができる
 
Homework
  • ボタンでもエンターを打ったときもリストに追加される。
  • 削除ボタンでto doを削除することができる。
  • リセットもできる。
 
以前に作成したApp.vueファイルから始まります。
// 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>
 
Todo1つだけ追加するので、addToDos関数名をaddToDoに変えます。
現在作成されているコードはto doの値がなくても追加されるため、値がない場合は追加されないように修正します。
空白を取り除いた値を確認することを忘れないでください。
 
// src/App.vue

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

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

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

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

<style scoped></style>
 
  • ボタンでもエンターを打ったときもリストに追加される。
ボタンはすでに作成しているので、エンターを押したときにto doがリストに追加されるように作成しましょう。
 
inputに @keypress.enter="addToDo”を追加します。
keydown.enterを使用すると、ハングルの作成時に2回入力される問題のためkeypressを使用しました。
 
// src/App.vue

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

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

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

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

<style scoped></style>
 
  • 削除ボタンでto doを削除することができる。
1番目の課題を解決したので、2番目の課題をしてみましょう。
まず、削除ボタンアイコンを作成するためにfontawesomeを使用します。
vueでfontawesomeを使用するために以下のライブラリをダウンロードします。
npm install --save @fortawesome/vue-fontawesome
npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
インストールが完了したら、main.jsファイルを以下のように修正します。
// src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
library.add(fas)

import './assets/main.css'

createApp(App).component('FaIcon', FontAwesomeIcon).mount('#app')
 
上記のように作成したら、fontawesomeのアイコンを使用することができます。
ではfontawesomを使って削除ボタンを作成し、削除関数を追加します。
 
// src/App.vue

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

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

const addToDo = () => {
  if (newToDo.value.trim()) toDos.value.push(newToDo.value)
  newToDo.value = ''
}
const deleteToDo = (index) => toDos.value.splice(index, 1)
</script>

<template>
  <input v-model="newToDo" />
	<button @click="addToDo" @keypress.enter="addToDo">+</button>
	<div v-for="(toDo, index) in toDos" :key="index">
	    <p>{{ toDo }}</p>
			<button @click="deleteToDo(index)">
          <FaIcon icon="trash" class="icon" />
      </button>
  </div>
</template>

<style scoped></style>
 
削除処理も作成しました。 統一感を与えるために、以前のAddボタンもfontawesomeアイコンを使用します。
// src/App.vue

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

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

const addToDo = () => {
  if (newToDo.value.trim()) toDos.value.push(newToDo.value)
  newToDo.value = ''
}
const deleteToDo = (index) => toDos.value.splice(index, 1)
</script>

<template>
  <input v-model="newToDo" />
	<button @click="addToDo" @keypress.enter="addToDo">
		<FaIcon icon="plus" />
	</button>
	<div v-for="(toDo, index) in toDos" :key="index">
	    <p>{{ toDo }}</p>
			<button @click="deleteToDo(index)">
          <FaIcon icon="trash" class="icon" />
      </button>
  </div>
</template>

<style scoped></style>
 
  • リセットもできる。
最後にreset処理を作成します。
同様に、fontawesomeを使ってボタンを作成し、関数を作成します。
// src/App.vue

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

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

const addToDo = () => {
  if (newToDo.value.trim()) toDos.value.push(newToDo.value)
  newToDo.value = ''
}
const deleteToDo = (index) => toDos.value.splice(index, 1)
const resetToDos = () => (toDos.value = [])
</script>

<template>
  <input v-model="newToDo" />
	<button @click="addToDo" @keypress.enter="addToDo">
		<FaIcon icon="plus" />
	</button>
	<button @click="resetToDos" class="reset-button">
	  <FaIcon icon="arrow-rotate-left" />
	</button>
	<div v-for="(toDo, index) in toDos" :key="index">
	    <p>{{ toDo }}</p>
			<button @click="deleteToDo(index)">
          <FaIcon icon="trash" class="icon" />
      </button>
  </div>
</template>

<style scoped></style>
 
完成です！
notion image
 

次の目標

LocalStorageにto doを保存してリロードしても削除されないように作成します。
作成したto doを修正することができます。