Passing Reactive value to other files #32
Answered
by
leighton-tidwell
leighton-tidwell
asked this question in
Q&A
-
I have a scenario where I am trying to create a little router using arrow-js. Perhaps I've missed the point entirely, but here is my setup: import { html, ParentNode, reactive, watch } from "@arrow-js/core";
import { homePage, vipPage } from "./pages";
import { header } from "./components";
import "./style.css";
type Page = "Home" | "VIP";
export const navigationState = reactive({
active: "Home" as Page,
});
const router = reactive({
Home: homePage,
VIP: vipPage,
});
const app = document.getElementById("app") as ParentNode;
const template = html`${header}${router[navigationState.active]}`;
const consoleLog = () => {
console.log("active page changed to", navigationState.active);
};
watch(consoleLog);
template(app); Basically, I am trying to change the page when a user clicks on a link in the header. inside of the header, I am importing the Anyone have a better idea on how to do this? |
Beta Was this translation helpful? Give feedback.
Answered by
leighton-tidwell
Nov 29, 2022
Replies: 1 comment 2 replies
-
Just wanted to post an update and say that the code works if I change const template = html`${header}${router[navigationState.active]}`; to const template = html`${header}${() => router[navigationState.active]}`; |
Beta Was this translation helpful? Give feedback.
2 replies
Answer selected by
leighton-tidwell
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Just wanted to post an update and say that the code works if I change
to