在带有 q-table 的 Quasar/Vue 中使用全局过滤器

Question

我尝试使用我创建的过滤器作为 Quasar 引导文件，

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";
    },
    }
}

在我的页面模板中效果很好

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

但在页面脚本中使用它不起作用：

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

我在控制台中得到的错误是这样的：

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

有没有人知道如何访问每个模板中的过滤器，最好是 {{ 123456 | in_k(true) }} 符号？

Answer 1

我想你需要这样访问它this.$filters