[to-do-app] TodoInput 컴포넌트 구현

 

 TodoInput 컴포넌트 구현 

v-model

https://kr.vuejs.org/v2/guide/forms.html

폼 입력 바인딩 — Vue.js

v-model
: 디렉티브를 사용하여 Input 창과 text Element 사이에서 양방향 바인딩이 가능하게 한다.

v-model 을 사용하면 input 창에 입력한 문자열을 바로 element에 바인딩이 가능하며, 이는 스크립트 단에서 변경을 해도 적용이 됩니다. 즉, 동기화가 된 상태라고 보시면 됩니다.

 

<template>
	<div>
		<input type="text" v-model="newTodoItem" />
	</div>
</template>

<script>
export default {
	data: function () {
		return {
			newTodoItem: "",
		};
	},
};
</script>

<style></style>

좌측에 input 창에 hello 를 입력하니 우측 스크립트 단에 data인 [newTodoItem]이 변경된 것을 볼 수 있습니다.

아래는 코드입니다.

 

 

components/TodoInput.vue

<template>
	<div class="inputBox shadow">
		<input
			type="text"
			v-model="newTodoItem"
			v-on:keyup.enter="addTodo"
		/>
		<span class="addContainer">
			<i class="fa-solid fa-plus addBtn" v-on:click="addTodo">
			</i>
		</span>
	</div>
</template>

<script>
export default {
	// data(): function() {}
	data() {
		return {
			newTodoItem: "",
		};
	},

	methods: {
		// addTodo: function() {}
		addTodo() {
			console.log(this.newTodoItem);
			localStorage.setItem(this.newTodoItem, this.newTodoItem);
			this.newTodoItem = "";
		},

		clearInput() {
			this.newTodoItem = "";
		},
	},
};
</script>

<style soped>
input:focus {
	outline: none;
}
.inputBox {
	background: white;
	height: 50px;
	line-height: 50px;
	border-radius: 5px;
}
.inputBox input {
	border-style: none;
	font-size: 0.9rem;
}
.addContainer {
	float: right;
	background: linear-gradient(to right, #6478fb, #8763fb);
	display: block;
	width: 3rem;
	border-radius: 0 5px 5px 0;
}
.addBtn {
	color: white;
	vertical-align: middle;
}
.closeModalBtn {
	color: #42b983;
}
</style>

addTodo() 메소드에서 this 는 해당 SPA 파일인 TodoInput.vue 파일을 가르킵니다.

또한, 함수를 사용할 때 name: function() {} 대신 name() {} 을 사용해도 됩니다.

 

<i class="fa-solid fa-plus addBtn" v-on:click="addTodo">

이는 awesome 아이콘을 사용한 코드입니다.

 

v-on:keyup.enter="addTodo"

keyup.enter 를 사용하면 엔터키로 바로 addTodo() 이벤트를 수행할 수 있습니다.

 

localStorage.setItem(this.newTodoItem, this.newTodoItem);

localStorage 에 데이터를 넣습니다. 두개의 변수는 키-쌍을 이릅니다. 따라서 키와 쌍의 형태로 로컬스토리지에 들어가게 됩니다.

 

 

 

---