Skip to main content
Create new
Introduction
Reactivity
Props
Logic
Events
Bindings
Lifecycle
Stores
Motion
Transitions
Animations
Easing
SVG
Actions
Classes
Component composition
Context API
Special elements
Module context
Debugging
7GUIs
Miscellaneous
App.svelte
<script>
let value
let error
$: computed = error
$: console.log('reacting to error up here:', error)
// When error is updated from this event handler, computed _does_ get updated.
const handleInput = () => {
if (value === 'err') {
error = "is not valid"
}
}

// But when error is updated from this reactive statement, computed does _not_ get updated.
const resetIfNeeded = (val) => {
if (val !== 'err' && error) {
// This doesn't trigger the reactive statement above. Why not?
error = undefined
console.log('resetting error:', error)
}
}
$: resetIfNeeded(value)
// Works as expected if `error` is updated directly from reactive statement rather than from a function called from the reactive statement:
//$: if (value !== 'err' && error) {
// error = undefined
// console.log('resetting error:', error)
//}
$: console.log('error =', error)
$: console.log('computed =', computed)
// Also works if you move the $: computed = line down here.
//$: computed = error
</script>

loading Svelte compiler...
/* Select a component to see its compiled code */
result = svelte.compile(source, {
generate: ,
});
/* Select a component to see its compiled code */