如何添加具有惯性vue3的全局过滤器

Question

我在 Laravel 中使用 Inertia 和 Vue 3。我需要知道如何添加全局过滤器。

我尝试使用这个 referrance 但它没有用。

app.js

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({el, app, props, plugin}) {
        return createApp({render: () => h(app, props)})
            .use(plugin)
            .mixin({methods: {route}})
            .mount(el);
    },
});

Answer 1

正如您链接到的博客 post（和 Vue.js 3 migration guide）中提到的，过滤器已在 Vue.js 的 v3 中删除。迁移指南中的建议是添加全局属性.

您可以在您的示例中执行以下操作：

createInertiaApp({
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({el, App, props, plugin}) {

        const app =  createApp({render: () => h(App, props)})
            .use(plugin)
            .mixin({methods: {route}});

        app.config.globalProperties.$filters = {
            currency(value) {
                return '$' + new Intl.NumberFormat('en-US').format(value)
            },
            // Put the rest of your filters here
        }

        app.mount(el);
    },
});

请注意，根据 vue 3 example in Intertia's documentation.[=18，我已将 setup 属性名称从 app 更新为 App =]

然后您可以使用 $filters 属性:

在您的代码中使用此“过滤器”

<p>{{ $filters.currency(amount) }}</p>

如何添加具有惯性vue3的全局过滤器

how to add global filter with inertia vue3

inertiajs

laravel

vuejs3