Closed
Description
svelte-cli version 1.0.4
template:
{{#each samples as sample}}
{{sample}}: <input type="text"><br>
{{/each}}
bootstrap:
<!doctype html>
<html>
<head>
<title>My first Svelte app</title>
</head>
<body>
<main></main>
<script src='helloWorld.js'></script>
<script>
var app = new helloWorld({
target: document.querySelector( 'main' ),
data: {
samples: ['foo', 'bar', 'bax', 'baz']
}
});
setTimeout(() => {
app.set({samples: ['foo', 'baz']});
}, 6000)
</script>
</body>
</html>
Reproduce:
- Load Page
- Enter values from 1 to 4 in the text boxes
- wait for timeout to fire
Expected:
Actual:
Looks like the relation between the loop pass and the actual dom element is not kept, so the 3rd and 4th input box are removed though the 2nd and 3rd should have been removed.
Update:
The same thing happens in React when no key is provided to the root element of each loop pass.
In React though it is enforced that there is only one root element in each iteration whereas in svelte this is not necessary.
Metadata
Metadata
Assignees
Labels
No labels