Vue.js에서 "this.〇〇 is undefined"라고 표시된 이야기
경위
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.jsvar 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.jsvar 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씩 더해집니다.
Reference
이 문제에 관하여(Vue.js에서 "this.〇〇 is undefined"라고 표시된 이야기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/enbi/items/7ef8c09cdeb3ef302ccd
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
간단한 예를 준비했습니다. 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.jsvar 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씩 더해집니다.
Reference
이 문제에 관하여(Vue.js에서 "this.〇〇 is undefined"라고 표시된 이야기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/enbi/items/7ef8c09cdeb3ef302ccd
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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씩 더해집니다.
Reference
이 문제에 관하여(Vue.js에서 "this.〇〇 is undefined"라고 표시된 이야기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/enbi/items/7ef8c09cdeb3ef302ccd텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
