vuejs2-touch-event에서 정의되지 않은 오류

Question

저는 Vuejs 2에서 새롭습니다. 나는 phonegap을 사용하여 응용 프로그램을 만들려고합니다. 최근에 저는 vue2-touch-event를 사용 중이며 일부 터치 이벤트를 처리하려고합니다. 사용자가 왼쪽/오른쪽으로 스 와이프하면 이벤트와 함께 추가 매개 변수가 전달됩니다. 여기

내가 매개 변수

<label v-touch:swipe.right="doneLisItem(index)"> 
</label> 

다음 스크립트

data() { 
    return { 
     newList: '', 
     todoLists: [], 
    }; 
}, 
methods: { 
    doneLisItem(index) { 
     return function(direction, event) { 
      console.log(index); 
      console.log(this.todoLists); 
      if (!this.todoLists[index].completed) { 
       this.todoLists[index].completed = true; 
      } 
     }; 
    }, 
} 

문제는 내가 CONSOLE.LOG (this.todoLists)에 정의되지 않은 받고있어입니다 내 코드가 통과하는 방법입니다. 아무도 나를이 문제를 해결하는 데 도움이 될 수 있습니다. TIA

Answer 1

반환 된 콜백이 호출 될 때 this은 Vue 인스턴스를 가리 키지 않습니다. 이것이 데이터 등록 정보에 액세스 할 수없는 이유이며 undefined이 콘솔에 기록됩니다.

은 그래서 this는 VUE 예를

doneLisItem(index) { 
    return (direction, event) => { 
     console.log(index); 
     console.log(this.todoLists); 
     if (!this.todoLists[index].completed) { 
      this.todoLists[index].completed = true; 
     } 
    }; 
}, 

으로 어휘 및 포인트 바인딩 또는 함수

내부의 정확한 VUE 인스턴스 변수 향해 변수를 가리키는 선언하여 closure의 사용을 만들 수 그래서 arrow function를 반환

methods: { 
    doneLisItem(index) { 
     var vm = this; //now the Return function has a closure over vm which is the correct vue instance 
     return function(direction, event) { 
      console.log(index); 
      console.log(vm.todoLists); 
      if (vm.todoLists[index].completed) { 
       vm.todoLists[index].completed = true; 
      } 
     }; 
    }, 
}