I have problem with parent fetch() hook, which is called during going to child page through the nuxt-link. How to resolve this problem? Maybe is it nuxt.js bug? To achieve parent -> child structure, I set up my project according to the pattern given in the nuxt.js documentation:
-parent.vue
-parent
--child1.vue
--child2.vue
For example going to Child1 through the nuxt-link: <nuxt-link to="/parent/child1">Child1</nuxt-link> causes calling fetch() hook in parent.
I think a lot of people have this problem. Thank you in advance for your help in resolving this problem.
Take a look at Vue custom options merge strategies https://v2.vuejs.org/v2/guide/mixins.html#Custom-Option-Merge-Strategies
~/plugins/custom-merge-fetch.js
import Vue from 'vue'
Vue.config.optionMergeStrategies.fetch = function (childFetch, parentFetch) {
// your logic
}
And in nuxt.config.js
plugins: [
'~/plugins/custom-merge-fetch',
],
I have already find the solution, which is very simple. In my case I forgot add default page for nuxt-child(creating index.vue file in parent folder) like below:
-parent.vue
-parent
--index.vue
--child1.vue
--child2.vue
After doing this, the problem is resolved and parent fetch() hook is not calling anymore. Previously, the DOM structure was not generated by default for child pages(index.vue file was not created), which resulted in the parent refreshing, when going to the child page through the nuxt-link.
Related
I am having a small issue, I know I can use _document.js for /page however I need a different document layout for a directory. I am wondering how can I change the document theme/layout based on a sub directory.
I tried to make a new _document.js under the sub directory /staff however that did not work.
That is a good question, indeed you can only create one custom _document.js (or _document.ts if you are using typescript). To change the structure of your DOM -- adding scripts, changing <Head> balises for SEO etc...
Since _document.js is the "root" of the DOM tree, it would not make sense to be able to overwrite this file in other subfolders.
However, if you need a different Layout, I would suggest to create a custom Layout component that you can use whenever you need! In your case, you can name it StaffLayout.
Note that your problem is a common use case and Next.JS even provided a demo repository to help you achieve it.
eg.
// components/staffLayout.js
import Navbar from './navbar'
import Footer from './footer'
export default function StaffLayout({ children }) {
return (
<>
<Navbar />
<main>{children}</main>
<Footer />
</>
)
}
and then in your /staff directory
// pages/staff/backOffice.js
import StaffLayout from '../../components/staffLayout'
export default function BackOffice() {
return (
<StaffLayout>
<>enter you code here</>
</StaffLayout>
)
}
If you need multiple Layouts, Next.js created a mechanism out-of-the-box that can even remove the need for using StaffLayout every-time. It is a little bit more advance so I will only link the documentation.
I'm trying to inject a CSS file to a third party iframe that I need to change the styling.
I thought of using
ngOnInit() {
...
this.myIframe.nativeElement.document.head.appendChild('style.css')
}
but it is not working for some reason beyond my grasp.
Any help will be appreciated.
Cheers
This workaround will work if your Iframe is not from a different domain. You will get a cross-browser error.
Template
<iframe #myIframe></iframe>
Component
#ViewChild('myIframe') public myIframe;
..........
ngAfterViewInit() {
const iframDoc = this.myIframe.nativeElement.contentWindow.document;
.....
iframDoc.head.appendChild('style.css');
}
.....
It isn't possible to inject code like I thought it was so I ended up overriding the CSS when the SCSS file that controlled that page was compiled.
In some occasions, I had to use the whole inheritance chain to get a field to behave the way it was required.
Thank you for your input #SuhelKhan
The problem is about how to maintain the content and state of an iframe in a component of Vue no matter the component is showing or hiding.
I tried two methods:
(1) using keep-alive together with vue-router
<keep-alive>
<router-view>
<Component></Component>
</router-view>
</keep-alive>
(2) take it as a sub component, using v-if to show and hide instead of vue-router
<Component v-if="$store.state.isShow"></Component>
both methods keeps the content of component but the iframe still refreshes every time, so is there any method to achieve just hiding and showing the iframe?
A similar question is Thomas question, he also uses the vue-router method and does not work out, I agree with the opnion of Thomas that Vue just keeps the content of component but not of iframe.
Thanks a lot!
If the sub component approach works for you:
<Component v-if="$store.state.isShow"></Component>
then a slight modification will keep the iframe from being refreshed on state changes:
<Component v-show="$store.state.isShow"></Component>
Note that this only works if the route remains unchanged.
If you actually need to use different routes, and if the only problem with refreshing the iframe is performance, you might be able to get away with loading the iframe contents via ajax and caching it in local storage.
I'm a bit of a newb in Meteor so this is possibly a trivial question for you Meteor masters out there.
I use a template which has a couple of child templates:
<template name="parent">
{{> child1}}
{{> child2}}
</template>
I noticed that parent.rendered and child1.rendered functions are invoked when reactive data under child2 changes.
My understanding of meteor docs is that only child2.rendered should be called. So, what I am seeing should not happen, yet for a reason which is beyond me, it does.
To rule out any noise, I gutted the child1 template (to contain only an empty div). Still, its rendered function is called.
Can anyone provide insight?
As of Meteor 0.7.0.1, the parent template will be re-rendered but the sibling child templates will not.
Here is a simple example Meteor app that shows this in action:
https://github.com/alanning/meteor-subtemplate-isolate-test
Keep in mind that Meteor UI is getting a drastic overhaul before Meteor 1.0 lands so a lot of things may change with respect to how templating works.
Just hypothesizing here, but I think the entire page rerenders when any reactive data changes. For example, if you were to have data in Session.get('test') and the only time the value of that is inserted into the DOM is in child2, I believe the entire page still rerenders.
I am using findOne just to fetch one certain element for my collection.
However, when I do that, all my template functions containing those collections are re-run and the content refreshed. The content is similar, the problem is I am applying styles to some of those elements, and these updates just reset everything as well. More importantly: those refreshes are completely useless.
For example, I have this template:
Template.content.cars = function () {
alert("I AM RERUN!");
return Cars.find();
};
And in another function, I am doing this:
Cars.findOne({ _id: Session.get('current_car') }, {});
Why would be the first template re-run? Am I doing something wrong?
I'm not sure why your first template would be re-run: are you sure something else isn't going on?
But as a general non-answer to your question: you should expect that a template which depends on the entirety of a collection will be re-run many times (for instance as the data loads incrementally when the page first renders). With meteor you need to write your HTML/CSS in such a way that this re-rendering won't cause problems.
Without knowing more about your problem I can't really say more than that.