时间戳

首页 > 解决方案 > 使用 TypeScript 在 Vue 3 中创建全局过滤器

typescript - 使用 TypeScript 在 Vue 3 中创建全局过滤器

问题描述

我在 Udemy 上学习这门课程，但它的内容已经过时，所以我不能按照作者创建全局过滤器所遵循的相同步骤。

此外，从 Vue 3 文档看来，不再支持过滤器。

我在这里尝试做的事情相当简单，它只需要将价格作为数字并将其作为字符串美元价格返回，例如： take100和 return $100。

这对我不起作用。我的main.ts样子是这样的：

import { createApp } from "vue";
import { Vue } from 'vue-class-component';
import { viewDepthKey } from "vue-router";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.filter('price', function(input: number){
  if(isNaN(input)){
    return "-";
  }
  return '$' + input.toFixed(2);
})

createApp(App)
  .use(store)
  .use(router)
  .mount("#app1");

这是错误：

src/main.ts:8:5
TS2339: Property 'filter' does not exist on type 'VueConstructor<Vue<unknown, {}, {}>>'.
     6 | import store from "./store";
     7 |
  >  8 | Vue.filter('price', function(input: number){
       |     ^^^^^^
     9 |   if(isNaN(input)){
    10 |     return "-";
    11 |   }

这就是我尝试在模板中使用它的方式：

{{ item.product.price | price }}

有没有办法让它工作或者我应该使用一些computed property？

编辑后续问题：

我的课看起来像这样：

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { IProductInventory } from "@/types/Product";
import format from "@/helpers/format";

@Options({
    name: "Inventory",
    components: {}
})
export default class Inventory extends Vue{
    inventory:IProductInventory[] = //Coming from an api call
}
</script>

谢谢！

标签： typescriptvue.jsvuejs3

解决方案

在./helpers/filters.ts

const filters = {
  price(input: number) {
    if (isNaN(input)) {
      return "-";
    }
    return '$' + input.toFixed(2);
  }
}
export default filters;

在您创建应用程序的地方全局安装它...

import filters from './helpers/filters'

const app = createApp(App);
app.config.globalProperties.$filters = filters
app.mount('#app')

然后就做

{{ $filters.price( price ) }}

推荐阅读