Why is this element not reactive?
I'm using this element in two partials within the same component:
In both partials,
When I change the value of one select, the other only updates if I close and re-open the item sheet.
The parent component of the two partials is
Which sets the context.
<TJSSelect options="{manaTypes}" bind:value='{$doc.system.manaType}' /><TJSSelect options="{manaTypes}" bind:value='{$doc.system.manaType}' />In both partials,
$doc$doc comes from context:<script>
import { getContext } from "svelte";
const doc = getContext("#doc");
</script><script>
import { getContext } from "svelte";
const doc = getContext("#doc");
</script>When I change the value of one select, the other only updates if I close and re-open the item sheet.
The parent component of the two partials is
ItemSheetShell.svelteItemSheetShell.svelte:<svelte:options accessors={true} />
<script>
import { ApplicationShell } from "@typhonjs-fvtt/runtime/svelte/component/core";
import { setContext, getContext } from "svelte";
import SpellHeader from "~/components/item/type/spell/SpellHeader.svelte";
import SpellTabs from "~/components/item/type/spell/SpellTabs.svelte";
export let elementRoot; //- passed in by SvelteApplication
export let documentStore; //- passed in by DocumentSheet.js where it attaches DocumentShell to the DOM body
export let document; //- passed in by DocumentSheet.js where it attaches DocumentShell to the DOM body
const tabMap = {
spell: SpellTabs,
};
const application = getContext("external").application;
let activeTab = "description";
setContext("#doc", documentStore);
$: item = $documentStore;
</script>
<template lang="pug">
svelte:component(this="{headerMap[item.type]}")
svelte:component(this="{tabMap[item.type]}")
</template><svelte:options accessors={true} />
<script>
import { ApplicationShell } from "@typhonjs-fvtt/runtime/svelte/component/core";
import { setContext, getContext } from "svelte";
import SpellHeader from "~/components/item/type/spell/SpellHeader.svelte";
import SpellTabs from "~/components/item/type/spell/SpellTabs.svelte";
export let elementRoot; //- passed in by SvelteApplication
export let documentStore; //- passed in by DocumentSheet.js where it attaches DocumentShell to the DOM body
export let document; //- passed in by DocumentSheet.js where it attaches DocumentShell to the DOM body
const tabMap = {
spell: SpellTabs,
};
const application = getContext("external").application;
let activeTab = "description";
setContext("#doc", documentStore);
$: item = $documentStore;
</script>
<template lang="pug">
svelte:component(this="{headerMap[item.type]}")
svelte:component(this="{tabMap[item.type]}")
</template>Which sets the context.
