Way to update / re-calculate filtered values

[focus-at]

What problem does this feature solve?

Hi! In Angular 1.x filters i can use $stateful, and values updated automatically

<div>{{'any-key' | translate }}</div>

module.filter('translate', function($rootScope) {

function translate(value) {

return $rootScope.translate[value] || value;
};

translate.$stateful = true;

return translate;

});

In VUE:

Filters not recalculate, and in filter "this" is undefined

<div>{{'any-key' | translate}}</div>

Methods not recalculate

<div>{{translate('any-key')}}</div>

Methods and Filters not recalculate, when i use this.$forceUpdate() method

What does the proposed API look like?

1 "this" link in filters for use context data.

Vue.filter('translate', function(value) => {

return this.$store.translate[value] || value;

});

2 auto or manually re-render value when i change Object this.$store.translate

[yyx990803]

Stateful filters are a bad idea, that was explicitly removed in Vue 2.0.

Method calls that refers to reactive state should update automatically, so it's either that your state is not reactive, or it's a bug.

If you believe it's bug, please open a bug report with reproduction.

[focus-at]

Method does not refer to a reactive state, i wanted to use the global value.
There a way to restart the method?

const storeMixin = {
  beforeCreate() {
    const options = this.$options;

    if (options.store) {
      this.$store = options.store;
    } else if (options.parent && options.parent.$store) {
      this.$store = options.parent.$store;
    }
  }
};

const translateMixin = {
  methods: {
    translate(value) {
      return this.$store.translate[value] || value;
    }
  }
};

[JounQin]

You can define a reactive property on translate method.

See: https://github.com/JounQin/vue-translator

[focus-at]

Thanks! this.$forceUpdate() worked in component but not in new Vue() instance.