Vue: Why v-text didn't support filter ?

Created on 21 Jun 2017  路  9Comments  路  Source: vuejs/vue

What problem does this feature solve?

Why can't use v-text="doSomething() | filter('args')" ?
Maybe the pipeline operator "|" ?

What does the proposed API look like?

v-text="doSomething() | filter('args')"

Most helpful comment

You can access your filters in your component like that: this.$options.filters.myCoolFilter. So in v-text you could write: <div v-text="$options.filters.myCoolFilter(myData)"

All 9 comments

Why not use getters when you can or just inline plain javascript otherwise? v-text="filter(doSomething(), 'args')"?
with:

export default {
  methods: {
    doSomething () {...},
    filter () {...}
  }
}

@nickmessing I have registered filter in Vue.filter and don't want to repeat in a new Vue()

According to docs
Vue 2.x filters can only be used inside mustache interpolations and v-bind expressions (the latter supported since 2.1.0), because filters are primarily designed for text transformation purposes. For more complex data transforms in other directives, you should use Computed properties instead

Considering that you want to pass some aditional arguments I think filters is not a good way to go.

I'd prefer:

// filters.js
export myCoolFilter (text, arg1, arg2) => `${text} ${arg1} ${arg2}`
<!-- Component.vue -->
<template>
  <div v-text="myComputed" />
</template>


md5-55ded034452e70f73df05be097dea4eb


Filters are a pretty bad design decision IMO anywhere other than simple text processing like uppercase

You can access your filters in your component like that: this.$options.filters.myCoolFilter. So in v-text you could write: <div v-text="$options.filters.myCoolFilter(myData)"

@Nirazul Thanks ^_^

@Nirazul

Filters in directives were intentionally removed in Vue 2.0 after intense discussions, and sorry to say that we won't bring them back now, because the situation hasn't changed.

@LinusBorg
I'm ok with this, I think you meant @leupom ;D

Oh, right. Thanks!

Just an example using v-bind

:text-content.prop="text | filter"
Was this page helpful?
0 / 5 - 0 ratings