필터 메서드 내에서 vue 인스턴스/데이터에 액세스하십시오.

Question

이렇게 필터 함수 내에서 vue 인스턴스 데이터에 액세스하려고합니다. JS : -

new Vue({ 
data:{ 
    amount: 10, 
    exchangeRate:50 
}, 
el:"#app", 
filters:{ 
    currency: function(amount){ 
      console.log(this); 
      //return amount * this.exchangeRate; 
      return amount *50; 

    } 
} 
}) 

HTML :

<div id="app"> 
{{ amount | currency}} 
</div> 

내 목표는 return amount * this.exchangeRate;하지만 this 여기 window와 동일한 사용하는 것입니다. 어떻게해야합니까? 감사합니다. . 에반, 뷰의 창조자에 따르면 jsfiddle

Answer 1

:

사용 방법 주로 상태 변경을 트리거합니다. 메서드를 호출하면 일반적으로 몇 가지 부작용이 생깁니다.

필터를 사용하여 주로 앱에서 다시 사용해야하는 간단한 텍스트 형식을 사용합니다. 필터는 순수해야합니다. 부작용이없고, 데이터가 들어오고 데이터 만 출력됩니다.

로컬 구성 요소 별 데이터 변환에 대해 계산 된 속성을 사용합니다. 필터와 마찬가지로 계산 된 게터는 순수해야합니다.

템플릿에서만 사용할 수있는 범위 변수 (예 : v-for 별칭)를 사용하여 무언가를 계산하려는 특별한 경우가 있습니다.이 경우 "도우미 메서드"를 사용해도됩니다. 인수를 전달하여 무언가를 계산하십시오.

(출처 : https://forum-archive.vuejs.org/topic/830/method-vs-computed-vs-filter/2)는 필터 구성 요소에 의존하기 때문에

그래서, 난 당신이 대신 필터의 경우 계산 된 속성을 사용한다고 생각합니다.

Answer 2

두 가지 옵션이 있습니다. 메소드/계산 된 속성을 사용하거나 필터에 추가 매개 변수를 전달하십시오.

필터는 주로 텍스트 변환을 위해 설계되었습니다 : 필터의 목적은 docs에서 등 텍스트 변환과 같은 간단 같이, 필터 내부에 this에 액세스 할 수 없습니다. 다른 지시문에서보다 복잡한 데이터 변환의 경우 대신 Computed 속성을 사용해야합니다.