mirror of https://github.com/sveltejs/svelte
reselect <select> when the option values change (#4885)
parent
f624d6e292
commit
e34f208843
@ -0,0 +1,34 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
items: [],
|
||||||
|
selected: 'two'
|
||||||
|
},
|
||||||
|
|
||||||
|
html: `
|
||||||
|
<select></select>
|
||||||
|
<p>selected: two</p>
|
||||||
|
`,
|
||||||
|
|
||||||
|
ssrHtml: `
|
||||||
|
<select value="two"></select>
|
||||||
|
<p>selected: two</p>
|
||||||
|
`,
|
||||||
|
|
||||||
|
test({ assert, component, target }) {
|
||||||
|
component.items = [ 'one', 'two', 'three' ];
|
||||||
|
|
||||||
|
const options = target.querySelectorAll('option');
|
||||||
|
assert.ok(!options[0].selected);
|
||||||
|
assert.ok(options[1].selected);
|
||||||
|
assert.ok(!options[2].selected);
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<select>
|
||||||
|
<option value='one'>one</option>
|
||||||
|
<option value='two'>two</option>
|
||||||
|
<option value='three'>three</option>
|
||||||
|
</select>
|
||||||
|
<p>selected: two</p>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
@ -0,0 +1,12 @@
|
|||||||
|
<script>
|
||||||
|
export let selected;
|
||||||
|
export let items;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<select bind:value={selected}>
|
||||||
|
{#each items as item}
|
||||||
|
<option>{item}</option>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<p>selected: {selected || 'nothing'}</p>
|
Loading…
Reference in new issue