I have a vue filter that I use to display numbers as our local currency (GBP) but I would like to show zero’s as a dash rather than £0.00. This is because in a large table with lots of zeros it makes it hard to spot the few items that are NOT zero.

My filter currently looks like this:

Vue.filter("gbp", function (value) {
  // Create our number formatter.
  if (value === null || value === undefined) {
    return value;
  } else {
    var formatter = new Intl.NumberFormat("en-GB", {
      style: "currency",
      currency: "GBP",
      minimumFractionDigits: 2,
    });
    return formatter.format(+value);
  }
});

How can I alter it to "hide" the zeros as dashes?

>Solution :

Try adding an extra if to test for 0

Inside that clause, you can return anything you like, e.g. -.

Vue.filter("gbp", function (value) {
  // Create our number formatter.
  if (value === null || value === undefined) {
    return value;
  } else if (value === 0) {
    return "-";
  } else {
    var formatter = new Intl.NumberFormat("en-GB", {
      style: "currency",
      currency: "GBP",
      minimumFractionDigits: 2,
    });
    return formatter.format(+value);
  }
});