[vue]메서드

숫자 증가시키기 예제

• data에 number 변수 정의

<template>
  <h1>{{number}}</h1>
</template>

<script>

export default {
  name: 'App',
  data:()=>{
    return {
      number:0
    }
  }
}
</script>

• methods에 number 더하는 함수 추가, 버튼 추가

<template>
  <h1>{{number}}</h1>
  <button v-on:click="addNumber">증가</button>
</template>

<script>

export default {
  name: 'App',
  data:()=>{
    return {
      number:0
    }
  },
  methods:{
    addNumber: ()=>{
      number++;
    }
  }
}
</script>

number is not defined

number 변수가 정의되지 않았다는 에러가 난다.

• this 키워드 사용

<template>
  <h1>{{number}}</h1>
  <button v-on:click="addNumber">증가</button>
</template>

<script>

export default {
  name: 'App',
  data:()=>{
    return {
      number:0
    }
  },
  methods:{
    addNumber: ()=>{
      return this.number++;
    }
  }
}
</script>

화면은 뜨지만 버튼을 클릭하면

TypeError: Cannot read properties of undefined (reading 'number')

여전히 에러가 뜬다.

• 기본 함수 형식 사용

<template>
  <h1>{{number}}</h1>
  <button v-on:click="addNumber">증가</button>
</template>

<script>

export default {
  name: 'App',
  data:()=>{
    return {
      number:0
    }
  },
  methods:{
    addNumber(){
      this.number++;
    }
  }
}
</script>

 

화살표 함수를 쓰면 scope가 달라지기 때문에 this가 가리키는 영역이 달라진다.