I have a title navbar which shows up on every page(TheNavbar Component). However, I would like to change the title based on the page. For example. I have a folder called projects and inside other one called _id and a bunch of pages that refers to this id. I would like to show the project name in all pages inside of this folder _id and persists the date in case of a refresh. Should I call my API and take the info inside of the TheNavBar component, every refresh and create a computed property?
Yes it is very possible to have a dynamic title
you can do it through computed properties and make an api call in each page change to retrieve the title
computed:{
title(){
return this.$store.getters['getTitle']
}
}
Related
I'm working on a Vue project, where I have a navbar component. On mobile, this component shows a title for the page. I need to set this title on a page by page basis, but haven't been able to find a reliable way to do it.
I've seen examples suggesting adding meta: { title: 'My Page' } to each of the routes for the app, then checking the matched route and applying the title. This doesn't work for me as on some pages the title will rely on data fetched from displayed page (e.g. /posts/:id would want the title to be the title of the post, which isn't available to the router).
Another option I considered is emitting an event, which sets the title. This would work, but would have to be reflected up multiple levels, and would require every page to have a title otherwise the previous title would remain after navigation.
Similar to the above, it could be implemented via Vuex to avoid having to pass the event up the chain, but would have the same issue of the previous title remaining after navigation. I could of course clear the value on route change, but this could introduce a race condition as the API request is cached, so revisiting a cached page could result in no title.
Ideally I want a mix between using meta values, and values dependent on the result of the API call. What is the best way to achieve this?
Take a look at this pictures and description that I'm going to describe in the most understandable way possible.... These are my router-links
and on the side is the router-view / ProfileView.vue component that will display the details of that person, just don't mind the reds, it's just that those are very private keys to be displayed online
How do you disable /fix this specific default behavior wherein after you refresh the whole webpage the specific router-link is still selected and the router-view is invisible. Refreshing the page returns like this
Best way is to update the url with the unique identifier (UUID) once the item get selected. Now when you refresh the page just identify the item using the (UUID) in url and apply the specific item using active state. As per the router-view case you can easily handle it with the url defined case - make /profile:id expect a parameter, which will only provided when you click any of the router-link else redirect back to items page with the last selected UUID to highlight the last selected item
Is there a way to specify the innermost components for a react-admin Field (For instance for the PictureField to override the 'img' tag with another MyImgComponent)?
Or do I have to create a whole new MyPictureField duplicating almost all of the code?
In the specific problem with the 'img' tag I would like to replace it with an Img component that handles authentication so that only images accesible by the logged in user can be shown in the PictureField.
Does anyone know how to expand this theme ( https://github.com/gilbitron/wp-rest-theme ) in order to theme specific pages? For example, I would like to create a page called "Menu" which has a unique navigation to click through to child pages Breakfast, Lunch, Dinner, etc without reload. I'm used to creating individual .php files to theme specific pages to my liking via page-{slug}.php - Is there an equivalent workflow using vue.js and wp rest api?
Instead of using page-menu.php to customize the /menu page, I would imagine I'd need to create something like a menu-page.vue file and add a custom method to specifically call that page in order to template it.
I can't find any examples of this process. Any help would be greatly appreciated.
What I did was add a field using Advanced Custom Fields that determined which template the page should use. I wrapped the display in a component called PageContent that looks like this:
<div :is="page.template"
:page="page"
v-if="!$loadingRouteData"
transition="fade"
transition-mode="out-in">
</div>
router:
'/:slug': {
component: PageContent,
name: 'Page'
}
So when someone navigates to that route, I fetch the page based on the slug param. The page variable then has a template attribute through ACF, which determines the component to display and defaults to a generic page:
if(pages[0].acf.template){
return pages[0].acf.template;
}
return 'page'
You need the WP JSON API plugin as well as the ACF plugin that adds ACF data to the json
My site uses this setup, happy to share more code if you have more questions.
I've successfully followed the Sitefinity documentation about how to use an external widget template file and now I would like to use a repeater in the external widget template file to display the child items as described in the Sitefinity documentation about how to display child items in the widget template
Moving this to a external widget template file fails on the Repeater attribute DataSource as it is not a valid attribute.
I know how I would approach iterating the child items
IQueryable<DynamicContent> childItems = parentItem.GetValue("ChildItems") as IQueryable<DynamicContent>;
But I am unsure how I would get the selected parent on PageLoad. Any suggestions?
It's hard to be very precise with the limited example you gave. But if you get this this template from a listing of stab mic content you could grab the last part of the URL which is the urlname of the dynamic item and use
The manager to look it up the. Get the children. Or if your widget has a Guid property use thunder to create a
Designer to selected the parent item to display.