필터 메서드 내부의 vue 인스턴스/데이터 액세스

필터 메서드 내부의 vue 인스턴스/데이터 액세스

이렇게 필터 기능 내부의 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

Vue의 창시자 Evan에 따르면:

주로 상태 변경을 트리거하는 방법을 사용합니다.메서드를 호출하면 일반적으로 부작용이 나타납니다.

기본적으로 모든 앱에서 재사용해야 하는 간단한 텍스트 서식을 위해 필터를 사용하십시오.필터는 순수해야 합니다. 부작용 없이 데이터 입력 및 데이터 출력만 가능합니다.

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

템플릿에서만 사용할 수 있는 범위 변수(예: v-for alias)를 사용하여 무언가를 계산하려는 특별한 경우가 있습니다. 이러한 경우 인수를 전달하여 무언가를 계산할 수 있도록 "도움말 방법"을 사용하면 됩니다.

(출처 : https://forum-archive.vuejs.org/topic/830/method-vs-computed-vs-filter/2)

따라서 필터는 컴포넌트에 따라 다르므로 이 경우 필터 대신 계산된 속성을 사용해야 한다고 생각합니다.

다음과 같이 합니다.

new Vue({
 data:{
  amount: 10,
  exchangeRate:60
 },
 el:"#app",
 filters:{
   currency: function(amount, exchange){
             console.log(exchange);
             //return amount * this.exchangeRate; <- can't do, must pass it in
            return amount * exchange;

   }
 }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<div id="app">
 {{ amount | currency(exchangeRate)}}
</div>

메서드/계산 속성을 사용하거나 필터링을 위한 추가 매개 변수를 전달하는 두 가지 옵션이 있습니다.접속할 수 없습니다.this필터의 목적은 문서의 텍스트 변환 등 단순하기 때문에 내부 필터:

필터는 주로 텍스트 변환 목적으로 설계되었습니다.다른 방향에서 더 복잡한 데이터 변환의 경우 계산 속성을 대신 사용해야 합니다.

언급URL : https://stackoverflow.com/questions/42828664/access-vue-instance-data-inside-filter-method