CODEWITHSUNDEEP
vue.js
Jeff
Jeff

Reputation: 25221

Using a filter in part of a string

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?

Upvotes: 3

Views: 4002

Answers (2)

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

Reputation: 1031

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)}`"

Upvotes: 4

David K. Hess
David K. Hess

Reputation: 17246

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.

Upvotes: 2

Related Questions