<script>
// Stackoverflow: https://stackoverflow.com/questions/67722751/binding-dynamic-and-dependent-selects-in-svelte
import ParentSelect from "./ParentSelect.svelte"
import ChildSelect from "./ChildSelect.svelte"
let selectedParent = { id: "a", text: "Parent option A", children: [
{ id: "a1", text: `Child option A1` },
{ id: "a2", text: `Child option A2` },
{ id: "a3", text: `Child option A3` }
] };
let selectedChild = { id: "a1", text: "Child option A1" };
// This is not updated when selectedParent is changed
//$: console.log(selectedChild)
</script>
<ParentSelect bind:selectedParent {selectedChild}></ParentSelect>
<ChildSelect bind:selectedChild {selectedParent}></ChildSelect>
<h1>{selectedParent.text}</h1>
<h2>{selectedChild.text}</h2>