Currently utilizing vuejs, vuex, and vuetify. Within this project there are 3 files in play and I will share the key sections here.
The main objective is to showcase data associated with the route parameter. Despite my attempts in Product.vue as shown below:
<h1 class="heading primary--text"> {{ product.partNumber }}</h1>
No content from that file seems to load, leading to error messages in the console such as...
Chrome: "TypeError: Cannot read property 'find' of undefined"
Firefox: [Vue warn]: Error in render: "TypeError: state.loadedProducts is undefined"
In a different section of this project, I created a vue page which successfully loads all products using v-for and a getter without any issues.
I am currently perplexed about what could be going wrong, seeking assistance before I lose more hair over this issue.
store.js
getters:{
loadedProducts (state) {
return state.products.sort((productA, productB) => {
return productA.partNumber > productB.partNumber
})
},
loadedProduct (state) {
return (productId) => {
return state.loadedProducts.find((product) => {
return product.partNumber === productId
})
}
}
}
router.js
{
path: '/product/:id',
name: 'Product',
props: true,
component: Product
}
Product.vue
<script>
export default {
name: 'Product',
props: ['id'],
computed: {
product () {
return this.$store.getters.loadedProduct(this.id)
}
}
}
</script>