Vue.Js에서 계산 된 속성의 매개 변수를 전달할 수 있습니까

Question

Vue.Js에서 계산 된 속성에 매개 변수를 전달할 수 있습니다. 계산을 사용하여 getter/setter를 사용할 때 매개 변수를 가져 와서 변수에 할당 할 수 있습니다. 여기 documentation에서 같은 :

// ... 
computed: { 
    fullName: { 
    // getter 
    get: function() { 
     return this.firstName + ' ' + this.lastName 
    }, 
    // setter 
    set: function (newValue) { 
     var names = newValue.split(' ') 
     this.firstName = names[0] 
     this.lastName = names[names.length - 1] 
    } 
    } 
} 
// ... 

이 또한 가능 :

계산 된 속성은 인수 반환 원하는 출력됩니다

// ... 
computed: { 
    fullName: function (salut) { 
     return salut + ' ' + this.firstName + ' ' + this.lastName  
    } 
} 
// ... 

. 그러나 이것을 시도 할 때 다음과 같은 오류가 발생합니다.

vue.common.js:2250 Uncaught TypeError: fullName is not a function(…)

그런 경우 어떻게 사용해야합니까?

Answer 1

당신은 사용해야 방법 :

<span>{{ fullName('Hi') }}</span> 

methods: { 
    fullName: function (salut) { 
     return salut + ' ' + this.firstName + ' ' + this.lastName  
    } 
} 

P.S. 계산 된 속성과 메서드의 차이점은 계산 된 속성이 캐시되고 해당 종속성이 변경 될 때만 변경된다는 것입니다. 즉, 여기서 매개 변수를 전달할 수 없습니다. 메서드는 호출 할 때마다 평가됩니다.

Answer 2

나는 당신이 달성하려고하는 것이 확실치 않지만, 계산 대신에 방법을 사용하여 완벽하게 괜찮을 것처럼 보입니다!

Answer 3

메서드를 사용할 수 있지만 데이터를 변경하지 않거나 외부 효과가없는 경우 메서드 대신 계산 된 속성을 사용하는 것이 좋습니다.

당신은 계산 속성이 방법으로 인수를 전달할 수 있습니다

(여기서 설명하지만, 관리자들에 의해 제안하지를 기억하지 않는다) :

computed: { 
    fullName: function() { 
     var vm = this; 
     return function (salut) { 
      return salut + ' ' + vm.firstName + ' ' + vm.lastName; 
     }; 
    } 
} 

편집 :이 솔루션을 사용하지 마십시오, 그것은 단지없이 코드를 복잡하게 모든 혜택.

Answer 4

예를 사용하면 params를 사용할 수 있습니다. 위에서 언급 한 답변과 마찬가지로, 예제에서는 실행이 매우 가벼운 방법을 사용하는 것이 가장 좋습니다.

참조 용으로 만,이 방법은 복잡하고 비용이 높은 상황에서, 당신과 같이 결과를 캐시 할 수 있습니다

data() { 
    return { 
     fullNameCache:{} 
    }; 
} 

methods: { 
    fullName(salut) { 
     if (!this.fullNameCache[salut]) { 
      this.fullNameCache[salut] = salut + ' ' + this.firstName + ' ' + this.lastName; 
     } 
     return this.fullNameCache[salut]; 
    } 
} 

참고 : 수천

를 처리하는 경우 메모리 Wa tch O ut에 이것을 사용하는 경우

Answer 5

기술적으로 말하면 우리는 매개 변수를 vuex의 getter 함수에 전달하는 것과 같은 방법으로 매개 변수를 전달할 수 있습니다. 이러한 함수는 함수를 반환하는 함수입니다. 상점의 게터의 예를 들어

:

이 게터는 구성 요소의 계산 기능에 매핑 할 수 있습니다

{ 
    itemById: function(state) { 
    return (id) => state.itemPool[id]; 
    } 
} 

:

computed: { 
    ...mapGetters([ 
    'ids', 
    'itemById' 
    ]) 
} 

그리고 우리는이 계산 기능을 사용할 수 있습니다 우리의 템플릿은 다음과 같습니다 :

<div v-for="id in ids" :key="id">{{itemById(id).description}}</div> 

우리는 동일한 방법을 적용하여 계산 된 od는 매개 변수를 취합니다.

computed: { 
    ...mapGetters([ 
    'ids', 
    'itemById' 
    ]), 
    descriptionById: function() { 
    return (id) => this.itemById(id).description; 
    } 
} 

그리고 우리의 템플릿을 사용

이 말했다되고

<div v-for="id in ids" :key="id">{{descriptionById(id)}}</div> 

, 나는 그것이 뷰와 함께 일을하는 올바른 방법 있다고 여기 말하고 있지 않다.

그러나 지정된 ID를 가진 항목이 저장소에서 변경되면 뷰는이 항목의 새 속성으로 내용을 새로 고치기 때문에 바인딩이 잘 작동하는 것으로 보입니다.