Skip to content

Commit 48fbcc1

Browse files
committed
docs (#155): add filters to migration guide
1 parent 7ebaed9 commit 48fbcc1

File tree

2 files changed

+77
-1
lines changed

2 files changed

+77
-1
lines changed

Diff for: src/.vuepress/config.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,8 @@ const sidebar = {
9393
'migration/v-model',
9494
'migration/functional-components',
9595
'migration/async-components',
96-
'migration/custom-directives'
96+
'migration/custom-directives',
97+
'migration/filters'
9798
]
9899
},
99100
{

Diff for: src/guide/migration/filters.md

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
---
2+
types:
3+
- removed
4+
- breaking
5+
---
6+
7+
# Filters <span v-for="type in $frontmatter.types" class="badge" :key="`type-${type}`">{{ type }}</span>
8+
9+
## Overview
10+
11+
Filters are removed from Vue 3.0 and no longer be supported.
12+
13+
## 2.x Syntax
14+
15+
In 2.x, developers could use filters in order to apply common text formatting.
16+
17+
For example:
18+
19+
```html
20+
<template>
21+
<h1>Bank Account Balance</h1>
22+
<p>{{ accountBalance | currencyUSD }}</p>
23+
</template>
24+
25+
<script>
26+
export default {
27+
props: {
28+
accountBalance: {
29+
type: Number,
30+
required: true
31+
}
32+
},
33+
filters: {
34+
currencyUSD(value) {
35+
return '$' + value
36+
}
37+
}
38+
}
39+
</script>
40+
```
41+
42+
While this seems like a convenience, it requires a custom syntax that breaks the assumption of expressions inside of curly braces being "just JavaScript," which has both learning and implementation costs.
43+
44+
## 3.x Update
45+
46+
In 3.x, filters are removed and no longer supported. Instead, we recommend replacing with method calls or computed properties instead.
47+
48+
Using the example above, here is one example of how it could be implemented.
49+
50+
```html
51+
<template>
52+
<h1>Bank Account Balance</h1>
53+
<p>{{ accountInUSD }}</p>
54+
</template>
55+
56+
<script>
57+
export default {
58+
props: {
59+
accountBalance: {
60+
type: Number,
61+
required: true
62+
}
63+
},
64+
computed: {
65+
accountInUSD() {
66+
return '$' + this.accountBalance
67+
}
68+
}
69+
}
70+
</script>
71+
```
72+
73+
## How to Migrate
74+
75+
Instead of using filters, we recommend replacing them with computed properties or methods.

0 commit comments

Comments
 (0)