I am using the vue mounted lifecyle method to fetch data. The data is stored in algolia. I use the search api to connect and fetch it. The data is only loaded when I refresh the site. It does not run on page navigation.
methods: {
async fetchInventory(data = {}) {
try {
this.isLoading = true;
const result = await index.search("", {hitsPerPage: 12});
this.auctions = result.hits;
this.totalItems = result.nbHits;
this.totalPages = result.nbPages;
this.isLoading = false;
} catch (error) {
this.isLoading = false;
console.log(error);
}
},
},
mounted() {
this.fetchInventory();
}
If this is client side rendering you may need to wait until nextTick OR use earlier/later hook:
mounted() {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
May need to use beforeCreate or created hook if rendering serverside.
Also how is page navigation being done? if you're using navigation API or a library that may be critical to fixing the issue
Related
I am making a weather app written in Vue.js, which fetches weather data periodically, but I have an issue rendering new data after the initial API call.
The empty data array is declared in the data, and a timer is used to fetch new data, as such:
data() {
return {
weatherData: [],
timer: '',
};
},
I have declared the data fetching in methods, as such:
methods: {
async fetchWeatherData() {
const response = await fetch("http://localhost:5002/timeseries");
const data = await response.json();
if (response.ok) {
console.log("Data fetched sucssefully!");
}
return data;
},
And when the app loads, the fetchWeatherData and setInterval is initiated:
async created() {
this.weatherData = await this.fetchWeatherData();
setInterval(() => this.timer = this.fetchWeatherData(), 10000)
},
The problem is that the new data is not rendered to the DOM, although new data is fetched successfully.
What would be the best step to ensure that the new data is rendered correctly upon successfull fetch?
-HK
In the component (or any container) where you render the weather data, add a key (like :key="renderWeatherKey"). Add renderWeatherKey to component data.
data() {
return {
weatherData: [],
timer: '',
renderWeatherKey: 0
};
},
In the method fetchWeatherData(), inside 'if' condition, add this.renderWeatherKey++ :
async fetchWeatherData() {
const response = await fetch("http://localhost:5002/timeseries");
const data = await response.json();
if (response.ok) {
console.log("Data fetched sucssefully!");
this.renderWeatherKey++
}
return data;
},
You can force the re rendered with that.
The solution, as posted by James Thomson over at the Vue forum, was to set the setInterval to async, since the fetch method also is async. See the full answer here.
I am using NuxtJS and I have a NavBar that goes to /website?web=1 and /website?web=2.. When I go from /website?web=1 to /website?web=2 vice versa.. My async fetch is not running at all.
website.vue
async fetch({ store, error, route, params }) {
let parameters;
const pageLimit = store.state.websites.pageLimit;
const offset = params.id ? (params.id - 1) * pageLimit : 0;
const web = route.query.web;
try {
if (web === "1") {
parameters = `?&is_global=true&offset=${offset}&limit=${pageLimit}`;
} else if (web === "2") {
parameters = `?&is_global=false&offset=${offset}&limit=${pageLimit}`;
} else {
parameters = `?co_id=${
route.query.co_id ? route.query.co_id : ""
}&ca_id=${
route.query.ca_id ? route.query.ca_id : ""
}&limit=${pageLimit}&offset=${offset}`;
}
await Promise.all([
store.dispatch("websites/fetchWebsites", parameters)
]);
} catch (e) {
console.log("Error: " + e);
}
},
NavBar.vue
methods: {
handleClick(tab, event) {
switch (tab.label) {
case "1":
this.$router.push({ name: "index" });
break;
case "2":
this.$router.push("/country");
break;
case "3":
this.$router.push("/website?web=1");
break;
case "4":
this.$router.push("/website?web=2");
break;
}
}
}
async fetch lifecycle is not invoked of query / param update
Sometimes you just want to fetch data and pre-render it on the server
without using a store. asyncData is called every time before loading
the page component. It will be called server-side once (on the first
request to the Nuxt app) and client-side when navigating to further
routes doc.
Also, a component does not remount on query / param update, so
lifecycles like created / mounted / beforeCreate etc are also not
invoked again. This helps in the application's performance as it avoids unnecessary rendering of the entire page where a few data changes would work.
Make a common method
methods: {
fetchData ({ store, error, route, params }) {
// your fetch logic here
let parameters;
const pageLimit = store.state.websites.pageLimit;
// ...
}
}
Call the method in async data
async fetch({ store, error, route, params }) {
this.fetchData({ store, error, route, params })
}
Call the method again on query change
watch: {
"$route.query.web": {
handler () {
this.fetchData({ store: this.$store, route: this.$route... });
}
},
Alternative to watch
beforeRouteUpdate (to, from, next) {
if (from.name === to.name) { // Call fn only when: route hasn't changed instead just query / params for the route has changed
this.fetchData({ store: this.$store, route: this.$route... })
}
},
When using Nuxt's fetch(), you need an explicit watcher to listen for route changes.
For a Nuxt component which has async fetch(), if you want it to update when the route changes, then setup a standard watcher.
See docs: https://nuxtjs.org/docs/2.x/features/data-fetching#listening-to-query-string-changes
export default {
watch: {
'$route.query': '$fetch' // This runs $fetch, defined below
},
async fetch() {
// Runs on server load (SSR), or when called (see above)
}
}
For other context's (or before Nuxt 2.12):
You could explore using watchQuery.
See docs: https://nuxtjs.org/docs/2.x/components-glossary/pages-watchquery/
export default {
watchQuery(newQuery, oldQuery) {
// Only execute component methods if the old query string contained `bar`
// and the new query string contains `foo`
return newQuery.foo && oldQuery.bar
}
}
https://nuxtjs.org/docs/2.x/components-glossary/pages-watchquery/
I have a Vue.js SPA with some pages that display data from a backend. When I navigate the pages via the navbar, everything works fine, components and data are loaded.
When I'm on the page, e.g. localhost:8080/#/mypage and press F5, the data doesn't get loaded / rendered. Same goes for when I directly navigate to the page via the address bar.
The data gets loaded in this function:
async beforeMount() {
await this.initializeData();
}
I've tried to call the method in every lifecycle hook, i.e. created, beforeCreated, mounted etc...
In the mounted lifecycle hook I'm setting a boolean property to true, so that the table is only rendered when the component is loaded (done with v-if).
mounted() {
this.componentLoaded = true;
}
Not sure if this is important, but I've tried it with or without and it doesn't work.
I would really appreciate it if somebody knew whats happening here.
EDIT:
this.applications is a prop and contains multiple applications which contain instances. I want to add some variables from the backend to each application.
console.log(1) gets printed
console.log(2) does not
initializeData: function () {
let warn = 0;
console.log("1");
this.applications.forEach(async application => {
const instance = application.instances[0];
console.log("2");
let myData = null;
try {
const response = await instance.axios.get('url/myData');
myData = response.data;
} catch (err) {
}
let tmpCount = 0;
let tmpFulfilled = 0;
myData.forEach(ba => {
if(!ba.fulfilled){
warn++;
application.baAllFulfilled = false;
}else {
tmpFulfilled++;
}
tmpCount++;
})
console.log("3");
// Assign values
this.baTotalWarnings = warn;
application.baAnzahl = tmpCount;
application.baFulfilled = tmpFulfilled;
this.componentLoaded = true;
}
Try removing the async and await keywords from your beforeMount, and remove this.componentLoaded from mounted. Set it instead in the then block (or after await) in your initializeData method. I'm not sure Vue supports the async keyword in its lifecycle methods.
Something like this:
beforeMount() {
this.initializeData(); // start processing the method
}
methods: {
initializeData() {
callToBackend().then(() => {
this.componentLoaded = true // backend call ready, can now show the table
})
}
}
I am trying to load a function when images from a data api are finished loading. However, it looks like the function is run before the ApiService is finished and thus the TiffParser.replaceIMG() function is not working properly
Here's my setup:
data: function() {
return {
images: null,
imageLink: apiService.imgSrc,
loading: true,
errored: false
};
},
created: function() {
// fetch the data when the view is created and the data is
// already being observed
apiService
.getImages(this.$route.params.id)
.catch(error => {
console.log(error);
this.errored = true;
})
.then(response => {
this.loading = false;
this.images = response.data;
});
},
//vue js provides us `mounted()`. This means `onload` in javascript
mounted: function() {
TiffParser.replaceIMG();
}
Is mounted the correct lifecycle hook for this task?
You can create a watcher for your images.
created() {
const unwatch = this.$watch('images', function(newValue = [], oldValue = []) {
// any code here will execulte once the value of `images` changes
TiffParser.replaceIMG();
unwatch(); // remove the watcher
// Note that you cannot use ES6 arrow functions here, since arrow functions
// are bound to the parent context, and the `this` keyword
// would then not be bound correctly to the Vue instance.
});
// fetch images
}
Is mounted the correct lifecycle hook for this task?
Yes, if you need to access or modify the DOM of your component immediately before or after the initial render.
However, images would be empty when it's first mounted so using a watcher instead of the mounted hook seems more appropriate for this use case.
I have a fairly heavy component which I would like to load asynchronously, while at the same time showing the user a loading spinner when it's loading.
This is my first attempt, using loading defined in data linked to a spinner component with v-if="loading". Unfortunately this doesn't work because it seems that Vue doesn't rebind this properly for functions inside components -
export default {
data: {
return {
loading: false,
};
},
components: {
// ...
ExampleComponent: (resolve) => {
// Doesn't work - 'this' is undefined here
this.loading = true;
require(['./ExampleComponent'], (component) => {
this.loading = false;
resolve(component);
});
},
},
};
I've also found some Vue 1.0 examples, but they depended on $refs - in 2.0 $refs is no longer reactive, and cannot be used for this. The only way left is for the child component itself to do something on its mount lifecycle event to the application data state to remove the loading spinner, but that seems a bit heavy. Is there a better way to do this?
You could declare a variable outside the object scope (but still is within module scope) then use the created hook to attach this. So your updated code would look like:
let vm = {}
export default {
// add this hook
created () {
vm = this;
},
data: {
return {
loading: false,
};
},
components: {
// ...
ExampleComponent: (resolve) => {
// since 'this' doesn't work, we reference outside 'vm'
vm.loading = true;
require(['./ExampleComponent'], (component) => {
vm.loading = false;
resolve(component);
});
},
},
};