TIL 230712 [Vue] 변수로 class 넣기 & 클릭이벤트 추가하기

변수 선언하기

typescript를 사용하므로 defineComponent로 export default를 한다. 사용할 변수나 함수는 setup() 안에서 선언하고 return을 해준다. 변수는 reactive 함수로 감싸줘야 값을 동적으로 변경할 수 있는 것 같다.

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

export default defineComponent({
  setup() {
    const data = reactive({
      selectedKr: true,
    });

    return { data };
  },
});
</script>

 

선언한 변수를 이용해 class 넣기

일반적인 클래스는 class에 넣으면 되고 변수를 사용하는 class는 앞에 :을 붙여서 :class로 사용하면 된다. 리액트처럼 class 안에 다 넣으려고 {}를 쓰지 않고 따로따로 써도 동작한다.

<template>
  <div>
    <button
      id="kr"
      class="korean_lan btn"
      :class="data.selectedKr ? 'select' : null"
    >
      한국어
    </button>
    <button
      id="en"
      class="english_lan btn"
      :class="!data.selectedKr ? 'select' : null"
    >
      English
    </button>
</template>

 

 

함수 선언하기

사용할 함수도 똑같이 setup() 안에 선언하고 return 할 때 넣어주면 된다.

export default defineComponent({
  setup() {
    const data = reactive({
      selectedKr: true,
    });

    const changeButtonState = (e) => {
      e.target.id === 'kr' ? (data.selectedKr = true) : (data.selectedKr = false);
    };

    return { data, changeButtonState };
  },
});
</script>

 

 

이벤트에 사용할 함수 지정하기

이벤트는 on이 붙지않고 @를 붙인다. 클릭이벤트는 @click 이렇게 적고 실행할 함수를 넣으면 된다. 이벤트들은 사용해야 할 때 이름을 찾아가며 쓰면 될 것 같다.

    <button
      id="kr"
      class="korean_lan btn"
      :class="data.selectedKr ? 'select' : null"
      @click="changeButtonState"
    >
      한국어
    </button>
    <button
      id="en"
      class="english_lan btn"
      :class="!data.selectedKr ? 'select' : null"
      @click="changeButtonState"
    >
      English
    </button>

 

이벤트 타입 지정하기

typescript와 함께 쓰고 있기때문에 어김없이 함수 인자 e에 빨간불이 들어왔다. 여기는 리액트처럼 해결해 주면 된다. e에는 Event를 타입으로 지정해 주고 e.target에 해당하는 HTML요소를 as 키워드를 사용해 지정해 주면 된다.

리액트에서는 타입을 import 해줬는데 뷰에서는 그렇게 해주지 않아도 동작하는 것 같다...😯

export default defineComponent({
  setup() {
    const data = reactive({
      selectedKr: true,
    });

    const changeButtonState = (e: Event) => {
      const target = e.target as HTMLButtonElement;
      target.id === 'kr' ? (data.selectedKr = true) : (data.selectedKr = false);
    };

    return { data, changeButtonState };
  },
});