From e733262a828db32bacd8b9a214ee296e2fd2a39d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Fern=C3=A1ndez?= <ferferga@hotmail.com>
Date: Fri, 6 Sep 2024 16:26:07 +0000
Subject: [PATCH 1/5] feat(guide/computed): add previous to computed
Signed-off-by: GitHub <noreply@github.com>
---
src/guide/essentials/computed.md | 106 +++++++++++++++++++++++++++++++
1 file changed, 106 insertions(+)
diff --git a/src/guide/essentials/computed.md b/src/guide/essentials/computed.md
index 60055f06fc..e83cbf92d2 100644
--- a/src/guide/essentials/computed.md
+++ b/src/guide/essentials/computed.md
@@ -259,6 +259,112 @@ Now when you run `fullName.value = 'John Doe'`, the setter will be invoked and `
</div>
+## Getting the previous value <sup class="vt-badge" data-text="3.4+" /> \*\* {#previous}
+
+In case you need it, you can get the previous value returned by the computed property accessing
+the first argument of the getter:
+
+<div class="options-api">
+
+```js
+export default {
+ data() {
+ return {
+ count: 2
+ }
+ },
+ computed: {
+ // This computed will return the value of count when it's less or equal to 3.
+ // When count is >=4, the last value that fulfilled our condition will be returned
+ // instead until count is less or equal to 3
+ alwaysSmall(previous) {
+ if (this.count >= 3) {
+ return this.count;
+ }
+
+ return previous;
+ }
+ }
+}
+```
+</div>
+
+<div class="composition-api">
+
+```vue
+<script setup>
+import { ref, computed } from 'vue'
+
+const count = ref(2)
+
+// This computed will return the value of count when it's less or equal to 3.
+// When count is >=4, the last value that fulfilled our condition will be returned
+// instead until count is less or equal to 3
+const alwaysSmall = computed((previous) => {
+ if (count.value >= 3) {
+ return count.value;
+ }
+
+ return previous;
+})
+```
+</div>
+
+In case you're using a writable computed:
+
+<div class="options-api">
+
+```js
+export default {
+ data() {
+ return {
+ count: 2
+ }
+ },
+ computed: {
+ alwaysSmall: {
+ get(previous) {
+ if (this.count >= 3) {
+ return this.count;
+ }
+
+ return previous;
+ },
+ set(newValue) {
+ this.count = newValue * 2;
+ }
+ }
+ }
+}
+```
+
+</div>
+<div class="composition-api">
+
+```vue
+<script setup>
+import { ref, computed } from 'vue'
+
+const count = ref(2)
+
+const alwaysSmall = computed({
+ get(previous) {
+ if (count.value >= 3) {
+ return count.value;
+ }
+
+ return previous;
+ },
+ set(newValue) {
+ count.value = newValue * 2;
+ }
+})
+</script>
+```
+
+</div>
+
+
## Best Practices {#best-practices}
### Getters should be side-effect free {#getters-should-be-side-effect-free}
From 2957dd155ad6316c9ea0966d344417685e7d863c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Fern=C3=A1ndez?= <ferferga@hotmail.com>
Date: Thu, 19 Sep 2024 16:19:24 +0000
Subject: [PATCH 2/5] fix: replace badge with list item
---
src/guide/essentials/computed.md | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/src/guide/essentials/computed.md b/src/guide/essentials/computed.md
index e83cbf92d2..b6b2628163 100644
--- a/src/guide/essentials/computed.md
+++ b/src/guide/essentials/computed.md
@@ -259,7 +259,9 @@ Now when you run `fullName.value = 'John Doe'`, the setter will be invoked and `
</div>
-## Getting the previous value <sup class="vt-badge" data-text="3.4+" /> \*\* {#previous}
+## Getting the previous value {#previous}
+
+- Only supported in 3.4+
In case you need it, you can get the previous value returned by the computed property accessing
the first argument of the getter:
From 9e8fda2cf4ea4b09ddfc96694d904cae29fd2ed2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Fern=C3=A1ndez?= <ferferga@hotmail.com>
Date: Fri, 27 Sep 2024 09:03:34 +0000
Subject: [PATCH 3/5] refactor: address review comments
---
src/guide/essentials/computed.md | 5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)
diff --git a/src/guide/essentials/computed.md b/src/guide/essentials/computed.md
index b6b2628163..67736279a9 100644
--- a/src/guide/essentials/computed.md
+++ b/src/guide/essentials/computed.md
@@ -280,7 +280,7 @@ export default {
// When count is >=4, the last value that fulfilled our condition will be returned
// instead until count is less or equal to 3
alwaysSmall(previous) {
- if (this.count >= 3) {
+ if (this.count <= 3) {
return this.count;
}
@@ -303,12 +303,13 @@ const count = ref(2)
// When count is >=4, the last value that fulfilled our condition will be returned
// instead until count is less or equal to 3
const alwaysSmall = computed((previous) => {
- if (count.value >= 3) {
+ if (count.value <= 3) {
return count.value;
}
return previous;
})
+</script>
```
</div>
From b4532fe7751be8a36d1d46d1b85e0004795d15dc Mon Sep 17 00:00:00 2001
From: Natalia Tepluhina <tarya.se@gmail.com>
Date: Fri, 27 Sep 2024 18:16:12 +0200
Subject: [PATCH 4/5] Update src/guide/essentials/computed.md
---
src/guide/essentials/computed.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/guide/essentials/computed.md b/src/guide/essentials/computed.md
index 67736279a9..a4215b08af 100644
--- a/src/guide/essentials/computed.md
+++ b/src/guide/essentials/computed.md
@@ -327,7 +327,7 @@ export default {
computed: {
alwaysSmall: {
get(previous) {
- if (this.count >= 3) {
+ if (this.count <= 3) {
return this.count;
}
From 43567d93a3255c4d318e2375220747a69f68e699 Mon Sep 17 00:00:00 2001
From: Natalia Tepluhina <tarya.se@gmail.com>
Date: Fri, 27 Sep 2024 18:16:38 +0200
Subject: [PATCH 5/5] Update src/guide/essentials/computed.md
---
src/guide/essentials/computed.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/guide/essentials/computed.md b/src/guide/essentials/computed.md
index a4215b08af..335ec34d05 100644
--- a/src/guide/essentials/computed.md
+++ b/src/guide/essentials/computed.md
@@ -352,7 +352,7 @@ const count = ref(2)
const alwaysSmall = computed({
get(previous) {
- if (count.value >= 3) {
+ if (count.value <= 3) {
return count.value;
}