vue.js 필터에서 vue 인스턴스를 반환합니다(Vue.js 2).

vue.js 필터에서 vue 인스턴스를 반환합니다(Vue.js 2).

국제화에 필터 기능을 사용하고 있습니다.

<div>{{ "hello" | message }}<div>

message는 글로벌 Vue.config.lang 변수에 의존하는 필터 함수입니다.

정상적으로 동작하지만 Vue.config.lang을 변경해도 메시지가 다시 표시되지 않습니다.

Vue.config.lang이 변경될 때마다 메시지 렌더링을 하고 싶어서 필터 기능을

message => locale_messages[Vue.config.lang][message]

로.

message => new Vue({
  template: '{{ message }}',
  computed: {
    message() { return locale_messages[Vue.config.lang][message]; }
  }
})

하지만 효과가 없어요.다음 오류 발생:

Uncaught TypeError: Converting circular structure to JSON
    at Object.stringify (<anonymous>)
    ....

제가 할 수 있는 일이 있을까요?Vue.js는 처음이라 사용할 수 있는 솔루션을 찾을 수 없습니다.

Evan의 말대로 필터는 순수해야 합니다.따라서 외부 어레이에서 값을 얻기 위해 글로벌 변수를 키로 사용할 수 없습니다.부작용 때문에.

그래서 당신의 문제에 대해 제 머릿속에 떠오르는 세 가지 해결책이 있습니다.

• 메서드로 필터를 바꿉니다.
• 심플하고 강력한 번역 모듈인 vue-i18-n 사용
• getter를 제공하여 글로벌 상태 관리에 도움이 되는 스토어 시스템(vuex)을 사용합니다.

개인적으로는 vuex와 vue-i18-n을 함께 사용하는 것을 좋아합니다.이렇게 하면 데이터와 사용 중인 언어를 중앙 집중화할 수 있습니다.또한 스토어를 사용하여 특정 데이터를 여러 언어로 제공할 수 있으며 vue-i18-n은 프로젝트의 모든 문자열을 신경 쓸 수 있습니다.

Vue는 처음이라 글로벌 변수가 어떻게 동작하는지는 잘 모르겠지만 커스텀 필터(Vue 참조도 포함)에 확실히 파라미터를 전달할 수 있습니다.다음과 같이 할 수 있습니다.

<!-- this = a reference to the vue instance -->
<span class="display-3">{{value|FormatValue(this)}}</span>

[...]

props: ["aIsPercentNeeded"],

[...]

Vue.filter("FormatValue", function (aValue, aVueInstance)
{
  if (!aVueInstance["aIsPercentNeeded"])
  {
    return aValue;
  }

  return aValue + "%";
});

언급URL : https://stackoverflow.com/questions/41380292/return-vue-instance-from-vue-js-filter-vue-js-2