I'm in the process of trying to embed a google sign in button into our project. I have something set up that works for the most part but there's one remaining issue where the button isn't displayed on first render but will show up after the page with that component is refreshed:
https://d.pr/i/AT36oQ
I suspect that something needs to be added to a componentDidUpdate() method in that component but I haven't yet been able to figure out what that is.
Here's a copy of the top level html:
Here's the render method of the component with the g-signin2 element:
Related
I'm building a multi page application that's based on Angular on the front. My app.component.html is made of:
<app-header></>(header component)
<app-sidenav></> (side navigation component)
and everything else is in <router-outlet></>.
In my header component, I have a bookmark button that opens a modal for adding a page to Favorites. It takes an url of a current page that's loaded on users screen and lets a user choose the page's name. The logic I'm trying to implement is next: if that page's url is already in user's favorites (which gets checked by the function from favoritesService, the bookmark button should change it's color and become disabled. This logic works perfect in a way that it compares current url with an array of added url's but the button's color doesn't change and it doesn't become disabled untill I refresh the page( because the function for checking if a page is already a favorite is called on header component's ngOnInit and it loads only at the start of the application(the boolean attribute in the header component doesn't get refreshed otherwise)). So, just a few more sentences to clarify, in case you didn't understand the scenario: Header component is loading at the start; user is browsing other pages not depending on the header component. When I change the page, header should check if the current page is already a favorite and if it is, a button from header.component.html should change its color and become disabled. This works perfectly, but only after I reload the whole browser, because only then is when the header's component gets refreshed and triggers the function for comparing URL's.
here you can do state management by using observable or BehaviorSubject. with that you can update your header component.
I'm using VUE.JS 2.0 and I have a page that has a b-tabs component with 2 tabs. When I click on an option on tab page 1 it pulls data from a web server using AXIOS
axios.get('https://wwwwwwwww.azurewebsites.net/api/formattedpubs/' +
self.new_researchers[0].PMIDS)
.then(res => {
self.publicationData= res.data.New_Publications;
}
and builds the data on tab page 2 using a v-for loop.
<div class="person-info" v-for="obj in publicationData" :key="obj.pmid" v-bind:data-pmid='obj.pmid' >
My problem is I need to know when it is finished being rendered because I have a third party component that runs a javascript function over the data and pulls in metrics from another resource.
<div><div class='altmetric-embed' data-badge-type='donut' v-bind:data-pmid='obj.pmid' data-link-target='_blank' data-badge-popover='bottom' ></div></div>
according the readme file from the third party
If you're adding Altmetric badges to the DOM after the page has
loaded (via AJAX, for example) then you can ask the Altmetric embed
script to search the page again for new matches by calling
_altmetric_embed_init in Javascript:
The problem is that the page needs to be completely rendered before the badges can be put on. If I click on another tab and then click back the badges are there. If I put a button with the JavaScript refresh from the third party company they are there. If I try to time the page to display by timing a programmatic function I can't get it to refresh first then call the other function.
Bottom line is how can I know when the page is rendered? I tried mounted but since I need to know when the second tab is loaded it seems to fire when the first tab page is loaded.
I tried VUE - Call a function after v-for has done looping
but that does not seem to work for the second refresh. If I put into the isRendered function
this.$forceUpdate();
I get an error in the console of
[Vue warn]: You may have an infinite update loop in a component render function.
My fall back is to put a button that says "Show Metrics" but that's a last resort. Sorry for being wordy Thanks
Perhaps after you set self.publicationData you can await nextTick(), or perform the action you need within the updated lifecycle hook which occurs after a rerender.
To be honest, I don't know what really causes the problem but will try to explain it.
In my react app, I have placed a Google Translate Widget (which is retired some years ago) to easily translate whole website in just a click. It works fine until I am clicking on a MODAL or some button that changes TAB without changing routes. I mean, when routing there is no problem but if new component renders in the same route (like it does in MODAL and TAB component), the app crashes and all I am getting is a blank page.
Images to make it clearer:
As it seems, Google translated page to French in homepage here is a different route and everything seems OK.
BUT when I click on Make a Reservation Button (which is the vertical one) or All Features button (which is the black one at the bottom), distressingly this is what I get:
A blank page. So, without using google-translate-widget all is working without a problem. But if the page is translated and user clicks on a button renders some component on the same route this happens. ANY solution suggestion or comment means so much to me.
Thank you.
I got the component which cause the insertBefore error inside span tag. It solved the issue.
I went through laracasts vuejs tutorials few times, thenetninja on youtube and few others..
So I decided to change my website front into vue because of reactivity.
Like for toggles and other stuff. But there are also components which are very useful and cool but in my case it seems like they are mostly unneeded.
Every tutorial is about basic things but in my case where I have:
<component-a>
<component-b></component-b>
</component-a>
<component-c></component-c>
And inside <component-b> I click on button and with that I need to change something in <component-c>.
I don't know how to do this besides adding everything inside one component which is not the case because some things are not supposed to be rendered if user is not logged in:
<component-c>
#if(auth()->user())
<component-d></component-d>
#endif
<component-e></component-e>
</component-c>
And I can't use php inside .vue :D
So I leave everything as it is and make reactivity based on that without using components.
Is that bad?
If it is, how to alter component-d on some click inside component-b with using components?
(In my case, B is dropdown menu from topbar and D is tab section that changes on that dropdown menu item clicks)
If certain content must be hidden from the client you can't use vue and just keep using php and laravel blade's #if, but then "reactivity" can only take place on a full page load.
If the content must only be hidden visually, of can be retrieved via an API then you can use Vue directives like v-if, v-show and use javascript to show and hide components.
I've been trying to use 'react-native-popup' in my project and rendering the popup gave me the below error in a red screen. If I reload, the message is treated like a warning and the app functions fine, but the error message shows up once in a while. I am wondering what the issue is?
Trying to add a root view with an explicit id already set. React Native uses the id field to track react tags and will overwrite this field. If that is fine, explicitly overwrite the id field to View.NO_ID before calling addMeasuredRootView.
This is how I used it in the render function:
<Popup ref={popup => this.popup = popup }/>
If you are getting something like the screenshot below , Please try reloading the app by tapping the reload button. I was getting this error if I made some changes in code that already had some exception/error. I hope this helps as it has worked for me almost every time.