TIL
[TIL] 20211030 typescript + vue 타입 정의
자바칩 프라푸치노
2021. 11. 1. 17:01
타입스크립트 강의 듣기
1. vue 에서 v-model은 한국어가 바로 반영이 안된다.
한국어를 바로 바인딩하려면 @input이벤트에 메소드를 걸어주고
:value로 값을 연결해서 메소드에서 값을 바꾸는 방법을 쓰면 된다.
2. ts에서 input타입 정의
handleInput(event: InputEvent) {
const eventTarget = event.target as HTMLInputElement;
this.$emit("input", eventTarget.value);
console.log(eventTarget);
3. 메소드 파라미터 타입 정의
//App.vue
<template>
<div>
<h1>Vue Todo with Typescript</h1>
<TodoInput :item="todoText" @input="updatTodoText" @add="addTodoItem" />
</div>
</template>
<script lang="ts">
import Vue from "vue";
import TodoInput from "./components/TodoInput.vue";
export default Vue.extend({
components: {
TodoInput,
},
data() {
return {
todoText: "",
};
},
methods: {
updatTodoText(value: string) {
this.todoText = value;
},
addTodoItem() {
const value = this.todoText;
localStorage.setItem(value, value);
this.initTodoText();
},
initTodoText() {
this.todoText = "";
},
},
});
</script>
728x90