Contact.vue
This page renders the Runs with Us page. It is not part of the nav-drawer but can only be reached by the Runs with Us button in all pages header.
Used Components
- 1️⃣
RunGuest - 2️⃣
MemberForm
Functions
loadComponent
Dynamically imports a Vue.js component by its name.
Parameters:
name: - The name of the component to load.
getPageContent
Fetches and processes the page content for the "Run with Us" page. This function retrieves data from the backend API /contact-page endpoint, then extracts and sets up the tabs and components to be displayed on the page. It dynamically loads Vue.js components specified in the tab data and maps them to their respective tab IDs for rendering.
- Sets the initial tab based on the query parameter or defaults to the first tab.
- Dynamically imports components and associates them with tab IDs.
- Updates the global pageContent and componentInstances references.
Handles errors by logging them and ensures the loading state is updated.
Reactivity
(anonymous) (watch)
Watch for changes in the route.query.tab and update the pageContent.tab accordingly
Parameters:
newTab: - The new tab ID
(anonymous) (watch)
Watch for changes in the pageContent.tab and the content of the page with a router.replace accordingly
Parameters:
pageContent.value.tab: - The new tab ID