I am accessing the following route: http://site.dev/person/1
The structure of my component is as follows:
// PeopleComponent.vue
<template>
<div>
<template v-if="person == null">
<b>Error, person does not exist.</b>
</template>
<template v-else>
<pre> {{ person }} </pre>
</template>
</div>
</template>
<script>
export default {
mounted() {
this.$store.dispatch('getPeople');
}
computed: {
// represents the person whose id potentially matches the value of `/:id` in route.
person(){
let id = parseInt(this.$route.params.id)
let person = null
if(id > 0)
person = this.$store.state.people.find(p => p.id == id)
return person;
}
}
}
</script>
// [styles]
Explanation of Component Functionality:
A unique ID is provided in the URL. This ID corresponds to a specific item displayed on the page. A computed property named
person()retrieves the object from the Vuex store based on the ID parameter in the URL.
Intended Outcome:
Initially, I want to display an error message at the top of the page if the requested object cannot be found. If the object exists, a simple representation of it should be displayed. The current functionality works, but there is a slight delay between fetching data from the API and locating the correct object in the store. This delay causes the error message to briefly appear, especially on slower network speeds. I aim to eliminate this display so that the error message does not show up at all when the object exists.
Troubleshooting Attempts:
v-cloak- Applied to various parent divs includingdiv#appwith no success.v-if- Utilized as shown in the example above.
Any guidance on resolving this issue would be greatly appreciated. Thank you!
Update 31/03/2020
In line with Phil's suggestion, I tried incorporating a flag to indicate page readiness through two methods.
Method #1
Modified mounted() to 'async' and added an await statement for the action retrieving people from the API, setting the flag to true afterward:
async mounted() {
await this.$store.dispatch('getPeople');
this.loaded = true;
}
Still seeing the error message momentarily.
Method #2
Employed a then callback within the action, setting the flag to true inside the callback function:
mounted() {
let vm = this
vm.$store.dispatch('getPeople').then(() => {
vm.loaded = true;
})
}
Both approaches failed to prevent the error message from appearing initially.
Suspected Issue:
Main Principle
Error should ONLY show if
loaded=trueandperson=null
- Page loads with
loaded=falseandperson=null. Error doesn't display. - API call fetches people data without displaying the error.
- After the call,
loadedchanges totrue. [At this point,loaded=true, and the computedpersonhasn't resolved yet, causing the momentary error display.] - Computed property finds the relevant record in the store shortly after.
- Error vanishes once
personis retrieved and is no longernull.
Edit 01/04/2020
Responding to Phil's inquiry:
What does your getPeople() action look like?
getPeople({ commit }) {
axios.get('/get/people')
.then(response => {
commit("getPeople", response.data);
})
.catch(error => {
console.log(error);
})
},