From 2a10d98ed232d8b99b14b267af7078d4cf7e9b54 Mon Sep 17 00:00:00 2001 From: Alessio <18360913+AlessioChen@users.noreply.github.com> Date: Sat, 9 Sep 2023 15:53:22 +0200 Subject: [PATCH] feat(#63): tutorial step 10 (#101) * feat(#63): tutorial step 10 * improvement tutorial/step-10 --- src/tutorial/src/step-10/App/template.html | 4 ++-- src/tutorial/src/step-10/description.md | 16 ++++++++-------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/tutorial/src/step-10/App/template.html b/src/tutorial/src/step-10/App/template.html index fb7e0429..d05c25de 100644 --- a/src/tutorial/src/step-10/App/template.html +++ b/src/tutorial/src/step-10/App/template.html @@ -1,4 +1,4 @@

Todo id: {{ todoId }}

- -

Loading...

+ +

Caricamento in corso...

{{ todoData }}
diff --git a/src/tutorial/src/step-10/description.md b/src/tutorial/src/step-10/description.md index 341464f4..613af820 100644 --- a/src/tutorial/src/step-10/description.md +++ b/src/tutorial/src/step-10/description.md @@ -1,6 +1,6 @@ # Watchers {#watchers} -Sometimes we may need to perform "side effects" reactively - for example, logging a number to the console when it changes. We can achieve this with watchers: +A volte abbiamo bisogno di eseguire dei "side effects" in modo reattivo. Per esempio, fare il log di un numero nella console quando esso cambia valore. Possiamo farlo attraverso i watchers:
@@ -10,12 +10,12 @@ import { ref, watch } from 'vue' const count = ref(0) watch(count, (newCount) => { - // yes, console.log() is a side effect - console.log(`new count is: ${newCount}`) + // si, console.log() è un side effect + console.log(`il nuovo valore di count è: ${newCount}`) }) ``` -`watch()` can directly watch a ref, and the callback gets fired whenever `count`'s value changes. `watch()` can also watch other types of data sources - more details are covered in Guide - Watchers. +`watch()` può essere utilizzato direttamente su di un ref e la callback viene eseguita appena cambia il valore di `count`. `watch()` può essere usato anche con altri tipi di sorgenti dati. Per maggiori dettagli, consultare Guida - I Watchers.
@@ -29,15 +29,15 @@ export default { }, watch: { count(newCount) { - // yes, console.log() is a side effect - console.log(`new count is: ${newCount}`) + // si, console.log() è un side effect + console.log(`il nuovo valore di count è: ${newCount}`) } } } ``` -Here, we are using the `watch` option to watch changes to the `count` property. The watch callback is called when `count` changes, and receives the new value as the argument. More details are covered in Guide - Watchers. +In questo caso, si utilizza l'opzione `watch` per osservare le modifiche alla proprietà `count`. La callback viene eseguita quando il valore di `count` cambia e riceve il nuovo valore come argomento. Per maggiori dettagli, consultare Guida - I Watchers.
-A more practical example than logging to the console would be fetching new data when an ID changes. The code we have is fetching todos data from a mock API on component mount. There is also a button that increments the todo ID that should be fetched. Try to implement a watcher that fetches a new todo when the button is clicked. +Un esempio più pratico rispetto a fare il logging all'interno della console potrebbe essere quello di recuperare nuovi dati quando un ID cambia. Il codice che abbiamo effettua il fetch di alcuni todos da una mock API al mount del componente. C'è un bottone che incrementa l'ID del todo che deve essere recuperato. Prova a implementare un watcher che recupera un nuovo todo quando il bottone viene cliccato.