Vue onClick 함수 사용하기

Vue에서 함수 작성하는 방법을 알고 있다면 버튼을 클릭하면 특정 함수가 실행 되록할 수도 있을 것입니다. 함수를 먼저 만들어 놓고 v-on:click 사용하여 연결할 수 있어요.

<template>
  <div class="name">
    {{ name }} 
  </div>
  <button class="btn btn-primary" v-on:click="clickHandler">
    버튼
  </button>
</template>

<script>
export default {
  setup() {    
    const name = "Vue Code"

    const clickHandler = () => {
      console.log("Clicked!!");
    }
    
    return {
      name,
      clickHandler
    }
  }
}
</script>

<style scoped>
.name {
  color: orange
}
</style>

clickHandler 함수를 먼저 만들어서 함수를 먼저 실행하면 Clicked 찍히도록 만들고 나서 button에 있는 v-on:click 부분에 함수 이름을 적어서 사용할 수 있어요. v-on:click에 사용하는 함수 이름 또한 template에 포함되는 것이니 return에 있어야 합니다.

name을 수정애서 {{ name }} 사용한 부분이 바뀌도록 하고 싶어서 수정하는 함수를 작성한다고 해 볼게요. name 변수를 let으로 변경하고 clickHandler에서 수정해 봤지만 변수 내용은 바뀌어도 화면에서 해보면 안 될 것입니다.

<script>
export default {
  setup() {    
    let name = "Vue Code"

    const clickHandler = () => {      
      name = "Vue Hello"
      console.log(name);
    }
    
    return {
      name,
      clickHandler
    }
  }
}
</script>

화변에서도 같이 변경되도록 하기 위해서 ref를 사용해 볼 수 있습니다. ref를 사용하기 위해서는 먼저 import 해야 합니다. name 변수에 데이터를 넣을 때 ref를 이용해서 넣으세요. 값을 변경하는 부분에서도 name.value를 수정해야 합니다.

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

export default {
  setup() {    
    const name = ref("Vue Code")

    const clickHandler = () => {      
      name.value = "Vue Hello"
      console.log(name);
    }
    
    return {
      name,
      clickHandler
    }
  }
}
</script>

이제 화면에서 해보면 Vue Code가 나오다가 Vue Hello가 나오는 것을 알 수 있습니다. 이렇게 화면 내용을 변경해 봤어요. ref를 사용하는 경우는 문자열이나 숫자를 사용할 수 있고 다양하게 사용할 수 있는데요. 배열이나 오브젝트인 경우에는 reactive 사용해여 데이터를 조작할 수 있습니다.

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

export default {
  setup() {    
    const name = reactive({
      key:1
    })

    const clickHandler = () => {      
      name.key = 2
      console.log(name);
    }
    
    return {
      name,
      clickHandler
    }
  }
}
</script>

ref와 reactive 예제 참조해보세요.