CODEWITHSUNDEEP
vue.js
VBAHole
VBAHole

Reputation: 1518

Using a Vue.js filter in a conditional statement

I am using the vue-currency-filter

and it works great. But there are times when the value it filters is not a number in my application. When that occurs it just show $0. I want it to show the text value that is not a number. when I have 345.23 I get $345.23 when I have 'No limit' I get $0 and i really want 'No Limit'

I have tried to include a ternary in my view but it fails. And i think that is related to this. Which i get but how can i solve this with a method?

Here is my relevant view html:

<div>{{ ch.Limit | currency }}</div>

and i tried something like:

<div>{{ Number.isNaN(ch.Limit) ? ch.Limit : ch.Limit | currency }}</div>

which doesn't work. I also tried to create a method like this:

valueIsCurrency(k) {
  return Number.isNaN(k) ? k | currency : k;
},

coupled with:

<div>{{ valueIsCurrency(ch.Limit) }}</div>

but the currency filter is not respected in the method. I suppose it is only for use in the render html portion. How can i fix this?

Upvotes: 5

Views: 4573

Answers (1)

tao
tao

Reputation: 90287

template

<div v-if="isNumber(ch.Limit)">{{ ch.Limit | currency }}</div>
<div v-else>{{ ch.Limit }}</div>

code

methods: {
  isNumber(n) {
    return typeof n === 'number';
  }
}

Upvotes: 14

Related Questions