W Vue JS wywołaj filtr z metody wewnątrz instancji vue


86

Powiedzmy, że mam taką instancję Vue:

new Vue({
    el: '#app',

    data: {
        word: 'foo',
    },

    filters: {
       capitalize: function(text) {
           return text.replace(/(?:^|\s)\S/g, function(a) { return a.toUpperCase(); });
       }
    },

    methods: {
        sendData: function() {
            var payload = this.$filters.capitalize(this.word); // how?
        }
    }
}

Mogę łatwo użyć filtra w takim szablonie:

<span>The word is {{ word | capitalize }}</span>

Ale jak mogę użyć tego filtru z poziomu metody instancji lub właściwości obliczonej? (Oczywiście ten przykład jest trywialny, a moje rzeczywiste filtry są bardziej złożone).

Odpowiedzi:



28

To właśnie zadziałało dla mnie

  1. Definiowanie filtra

    //credit to @Bill Criswell for this filter
    Vue.filter('truncate', function (text, stop, clamp) {
        return text.slice(0, stop) + (stop < text.length ? clamp || '...' : '')
    });
    
  2. Korzystanie z filtra

    import Vue from 'vue'
    let text = Vue.filter('truncate')(sometextToTruncate, 18);
    

Wadą tej odpowiedzi jest poleganie na import Vue from 'vue'nowej zmiennej i tworzenie jej, gdy taka już istnieje.
Jay Bienvenu

3

Możesz utworzyć vuexpodobną funkcję pomocniczą, aby odwzorować globalnie zarejestrowane filtry na obiekt metod komponentu vue:

// map-filters.js
export function mapFilters(filters) {
    return filters.reduce((result, filter) => {
        result[filter] = function(...args) {
            return this.$options.filters[filter](...args);
        };
        return result;
    }, {});
}

Stosowanie:

import { mapFilters } from './map-filters';

export default {
    methods: {
        ...mapFilters(['linebreak'])
    }
}

1

jeśli twój filtr jest podobny do tego

<span>{{ count }} {{ 'item' | plural(count, 'items') }}</span>  

to jest odpowiedź

this.$options.filters.plural('item', count, 'items')

0

Aby uzupełnić odpowiedź Morrisa, jest to przykład pliku, którego zwykle używam do umieszczania filtrów w środku, możesz użyć w dowolnym widoku za pomocą tej metody.

var Vue = window.Vue
var moment = window.moment

Vue.filter('fecha', value => {
  return moment.utc(value).local().format('DD MMM YY h:mm A')
})

Vue.filter('ago', value => {
  return moment.utc(value).local().fromNow()
})

Vue.filter('number', value => {
  const val = (value / 1).toFixed(2).replace('.', ',')
  return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.')
})
Vue.filter('size', value => {
  const val = (value / 1).toFixed(0).replace('.', ',')
  return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.')
})

Nigdy nie jest dobrym pomysłem deklarowanie rzeczy w zakresie globalnym, co windows.Vuei tak się windows.momentdzieje, chyba że jest to absolutnie konieczne, bez żadnego innego sposobu.
J.Ko

Zupełnie nieprawda w tym temacie! Globalnie zdefiniowane filtry dla projektu to dobra zasada!
realtebo
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.