Using a filter in part of a string

Question

I have a filter that formats a number based on what stat type it is (percent, integer, currency, etc). I want to use this filter on a value as part of a string. See below:

<js-widget
                v-on:click="this.selectedReportId = key"
                :selected="this.selectedReportId == key"
                :icon="report.icon"
                :stat="report.current | stat report.statType"
                :title="report.title"
                :tooltip="report.tooltip"
                :percent="report.percent"
                :description="'Previous value: '+(report.past | stat report.statType)">
</js-widget>

As you can see in the :stat parameter, I can use the filter if it is the only thing in the expression. But when it tries to evaluate the :description parameter, I get Error when evaluating expression. Is it possible to use a filter in this way?

Дмитро Іванов · Accepted Answer · 2020-01-24 17:55:06Z

4

It's been very long since the question was asked, but if someone searches, I happen to know the solution. First there is a way to call a filter from inside the vue component. Actually all filters are stored in the

this.$options.filters

collection. So if you want to call a filter from inside the component you should do

...
this.$options.filters.stat(report.past, report.statType)
...

And if you want to do the same from the markup, you should also call filter not like filter (| syntax), but like the component method

<js-widget
                v-on:click="this.selectedReportId = key"
                :selected="this.selectedReportId == key"
                :icon="report.icon"
                :stat="report.current | stat report.statType"
                :title="report.title"
                :tooltip="report.tooltip"
                :percent="report.percent"
                :description="'Previous value: '+ $options.filters.stat(report.past, report.statType)">
</js-widget>

Or, better, with template string

:description = "`Previous value: ${$options.filters.stat(report.past, report.statType)}`"

answered Jan 24, 2020 at 17:55

Дмитро Іванов

1,0316 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

HyperionX Over a year ago

So much cleaner than a computed property, thank you!

David K. Hess · Accepted Answer · 2016-01-26 23:47:35Z

2

The filter is something available outside of the expression you are evaluating – so that's not going to work syntactially

I would use a computed property instead. For more information, see http://vuejs.org/guide/computed.html.

edited Jan 26, 2016 at 23:47

answered Jan 26, 2016 at 19:21

David K. Hess

17.3k2 gold badges53 silver badges77 bronze badges

4 Comments

Jeff Over a year ago

Thanks. I don't have the widget component designed in a way that I could compute it within the component. I just pass a string as the description. I ended up making a method on the current component that build the string for me and used Vue.filter('stat') to fetch the filter.

David K. Hess Over a year ago

You wouldn't make it a computed in the widget - you would do it in the parent component hosting the widget and then use it in the :description binding.

Jeff Over a year ago

Since I have multiple reports, the description field is a nested property inside them. So I made a method getReportDescription(report). I guess are you suggesting I could make a formattedReports property that formats the whole array of reports?

David K. Hess Over a year ago

Oh, as in you are iterating over a collection? Then a method based solution like you did is the next best thing.

Collectives™ on Stack Overflow

Using a filter in part of a string

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related