使用q-table在类星体/Vue中的全局滤波器

Question

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

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