Reactivity /
Updating arrays and objects
a. Basics b. Adding data c. Dynamic attributes d. Styling e. Nested components f. Making an app a. Assignments b. Declarations c. Statements d. Updating arrays and objects a. Declaring props b. Default values c. Spread props a. If blocks b. Else blocks c. Else-if blocks d. Each blocks e. Keyed each blocks f. Await blocks a. DOM events b. Inline handlers c. Event modifiers d. Component events e. Event forwarding f. DOM event forwarding a. Text inputs b. Numeric inputs c. Checkbox inputs d. Group inputs e. Textarea inputs f. Select bindings g. Select multiple h. Contenteditable bindings i. Each block bindings j. Media elements k. Dimensions l. This m. Component bindings n. Binding to component instances a. onMount b. onDestroy c. beforeUpdate and afterUpdate d. tick a. Writable stores b. Auto-subscriptions c. Readable stores d. Derived stores e. Custom stores f. Store bindings a. Tweened b. Spring a. The transition directive b. Adding parameters c. In and out d. Custom CSS transitions e. Custom JS transitions f. Transition events g. Local transitions h. Deferred transitions i. Key blocks a. The animate directive a. The use directive b. Adding parameters a. The class directive b. Shorthand class directive c. Inline styles d. The style directive a. Slots b. Slot fallbacks c. Named slots d. Checking for slot content e. Slot props a. setContext and getContext a. <svelte:self> b. <svelte:component> c. <svelte:element> d. <svelte:window> e. <svelte:window> bindings f. <svelte:document> g. <svelte:body> h. <svelte:head> i. <svelte:options> j. <svelte:fragment> a. Sharing code b. Exports a. The @debug tag b. HTML tags a. Congratulations!
Svelte's reactivity is triggered by assignments. Methods that mutate arrays or objects will not trigger updates by themselves.
In this example, clicking the "Add a number" button calls the addNumber
function, which appends a number to the array but doesn't trigger the recalculation of sum
.
One way to fix that is to assign numbers
to itself to tell the compiler it has changed:
function addNumber ( ) {
numbers. push ( numbers. length + 1 ) ;
numbers = numbers;
}
You could also write this more concisely using the ES6 spread syntax:
function addNumber ( ) {
numbers = [ ... numbers, numbers. length + 1 ] ;
}
The same rule applies to array methods such as pop
, shift
, and splice
and to object methods such as Map.set
, Set.add
, etc.
Assignments to properties of arrays and objects — e.g. obj.foo += 1
or array[i] = x
— work the same way as assignments to the values themselves.
function addNumber ( ) {
numbers[ numbers. length] = numbers. length + 1 ;
}
However, indirect assignments to references such as this...
const foo = obj. foo;
foo. bar = 'baz' ;
or
function quox ( thing ) {
thing. foo. bar = 'baz' ;
}
quox ( obj) ;
...won't trigger reactivity on obj.foo.bar
, unless you follow it up with obj = obj
.
A simple rule of thumb: the updated variable must directly appear on the left hand side of the assignment.
Show me