Using global filters in Quasar/Vue with q-table

Question

I try to use a filter I created as a Quasar boot-file,

export default ({ app }) => {
  app.config.globalProperties.$filters = {
    in_k: function (value, avoidSign, decimals=1) {
      value = Math.round(value / 1000 * Math.pow(10, decimals)) / Math.pow(10, decimals);
      return new Intl.NumberFormat("sv-SE", {
          style: "decimal",
          useGrouping: false,
          minimumFractionDigits: decimals,
          maximumFractionDigits: decimals,
          signDisplay: value !== 0 && !avoidSign ? "always" : "never",
        }).format(value) + "K";
    },
    }
}

which works well in my page template

{{ $filters.in_k(123456, true) }} // 123.5K

but using it within the page's script does not work:

<q-table
      title="Treats"
      :rows="rows"
      :columns="columns"
      row-key="title"
    />

export default ({
  name: 'PageIndex',
  setup() {
    const $store = useStore();

    let columns = [
      {
        name: 'name',
        required: true,
        label: 'Title',
        align: 'left',
        field: row => row.title,
        format: val => `${val}`,
        sortable: true
      },
      
      {
        name: 'invested', align: 'right',
        label: 'Invested',
        field: row => (row.invested),
        format: val => `${$filters.in_k(val, true)}`,
        sortable: true
      },

    ];

    return {
      columns,
      rows: $store.state.generic_store.data
    }
  }
})

The error I get in the console is this:

ReferenceError: $filters is not defined
    at Object.format (Index.vue?8b24:53)

Does anyone have an idea on how to access the filter in every template, preferably even the {{ 123456 | in_k(true) }} notation?

Answer 1

I think you need to access it like this this.$filters