다음과 같은 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?
}
}
}
다음과 같은 템플릿에서 필터를 쉽게 사용할 수 있습니다.
<span>The word is {{ word | capitalize }}</span>
그러나 인스턴스 메서드 또는 계산 된 속성 내에서이 필터를 어떻게 사용할 수 있습니까? (분명히이 예제는 사소하고 실제 필터는 더 복잡합니다.)
답변
this.$options.filters.capitalize(this.word);
답변
이것이 나를 위해 일한 것입니다.
-
필터 정의
//credit to @Bill Criswell for this filter Vue.filter('truncate', function (text, stop, clamp) { return text.slice(0, stop) + (stop < text.length ? clamp || '...' : '') });
-
필터 사용
import Vue from 'vue' let text = Vue.filter('truncate')(sometextToTruncate, 18);
답변
필터가 이와 같은 경우
<span>{{ count }} {{ 'item' | plural(count, 'items') }}</span>
이것이 답이다
this.$options.filters.plural('item', count, 'items')
답변
vuex
같은 도우미 함수를 만들어 전역 적으로 등록 된 필터를 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;
}, {});
}
용법:
import { mapFilters } from './map-filters';
export default {
methods: {
...mapFilters(['linebreak'])
}
}
답변
Morris 대답을 보완하기 위해 이것은 일반적으로 필터를 넣는 데 사용하는 파일의 예입니다.이 방법을 사용하여 모든 뷰에서 사용할 수 있습니다.
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, '.')
})