In Svelte you can listen for changes in the component state, and update other variables.
For example if you have a count variable:
<script>
let count = 0
</script>
and you update it by clicking a button:
<script>
let count = 0
const incrementCount = () => {
count = count + 1
}
</script>
{count} <button on:click={incrementCount}>+1</button>
You can listen for changes on count using the special syntax $: which defines a new block that Svelte will re-run when any variable referenced into it changes.
Here’s an example:
<script>
let count = 0
const incrementCount = () => {
count = count + 1
}
$: console.log(`${count}`)
</script>
{count} <button on:click={incrementCount}>+1</button>
I used the block:
$: console.log(`${count}`)
You can write more than one of them:
<script>
$: console.log(`the count is ${count}`)
$: console.log(`double the count is ${count * 2}`)
</script>
And you can also add a block to group more than one statement:
<script>
$: {
console.log(`the count is ${count}`)
console.log(`double the count is ${count * 2}`)
}
</script>
I used a console.log() call in there, but you can update other variables too:
<script>
let count = 0
let double = 0
$: {
console.log(`the count is ${count}`)
double = count * 2
console.log(`double the count is ${double}`)
}
</script>
Download my free Svelte Handbook!