[英]Using global filters in Quasar/Vue with q-table
I try to use a filter I created as a Quasar boot-file,我尝试使用我创建的过滤器作为 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";
},
}
}
which works well in my page template在我的页面模板中效果很好
{{ $filters.in_k(123456, true) }}
// 123.5K {{ $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 |有没有人知道如何访问每个模板中的过滤器,最好是 {{ 123456 | in_k(true) }} notation? in_k(true) }} 符号?
I think you need to access it like this this.$filters
我想你需要这样访问它this.$filters
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.