경위

safari에서 웹 개발을 할 때 콘솔에 this.func() is undefined 라고 표시되어 있어 뭐야 이것은? 되었을 때의 이야기입니다.

「methods내에 func()는 제대로 정의하고 있고···.」라고, vue 초보자의 나는 무엇이 되지 않는지 모르고, 조사해 보았습니다.

예

간단한 예를 준비했습니다. html과 js는 다음과 같습니다.

test.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <div id="app">
        <button @click="counter">クリック！</button>
        {{ num }}
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="test.js"></script>
</body>
</html>

test.js

var app = new Vue({
    el: '#app',
    data:{
        num: 0
    },
    methods:{
        counter: function(){
            setInterval(function() {
                this.num += 1
            },1000)
        }
    }
})

HTML을 표시하면 이런 느낌이 듭니다.

버튼을 클릭하면 버튼 옆의 "0"이 초당 1, 2, 3 ...로 증가합니다 (실제로 오류가 발생합니다)

뭐가 안돼?

counter 함수의 "this"때문입니다.

이 this는 vue 인스턴스의 this가 아니라 setInterval의 this(window?)를 가리킵니다.

대책

setInterval() 을 호출하기 전에 var th = this; 라고 써 봅시다.

변경 후 js 파일은 다음과 같습니다.

test.js

var app = new Vue({
    el: '#app',
    data:{
        num: 0
    },
    methods:{
        counter: function(){
            var th = this;
            setInterval(function() {
                th.num += 1
            },1000)
        }
    }
})

이렇게 하면 th는 vu 인스턴스의 this를 저장하게 되므로 num이 1씩 더해집니다.