Digamos que eu tenha uma instância Vue assim:
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?
}
}
}
Posso usar facilmente o filtro em um modelo como:
<span>The word is {{ word | capitalize }}</span>
Mas como posso usar este filtro em um método de instância ou propriedade computada? (Obviamente, este exemplo é trivial e meus filtros reais são mais complexos).
javascript
vue.js
harryg
fonte
fonte
this.$options
não tem umafilters
propriedade.this.$root.$options.filters
Isto é o que funcionou para mim
Definindo filtro
//credit to @Bill Criswell for this filter Vue.filter('truncate', function (text, stop, clamp) { return text.slice(0, stop) + (stop < text.length ? clamp || '...' : '') });
Usando filtro
import Vue from 'vue' let text = Vue.filter('truncate')(sometextToTruncate, 18);
fonte
import Vue from 'vue'
e criar uma nova variável quando uma já existe.Você pode criar uma
vuex
função auxiliar semelhante para mapear filtros registrados globalmente no objeto de métodos de um componente 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; }, {}); }
Uso:
import { mapFilters } from './map-filters'; export default { methods: { ...mapFilters(['linebreak']) } }
fonte
se o seu filtro é algo assim
<span>{{ count }} {{ 'item' | plural(count, 'items') }}</span>
esta é a resposta
this.$options.filters.plural('item', count, 'items')
fonte
Para complementar a resposta de Morris, este é um exemplo de arquivo que normalmente uso para colocar filtros dentro, que você pode usar em qualquer visualização usando este método.
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, '.') })
fonte
windows.Vue
e owindows.moment
faz, a menos que seja absolutamente necessário, sem nenhuma outra maneira.