Tengo una página dinámica que carga los detalles del producto, pero el html se carga antes que los datos.
Entonces, cuando trato de usar elementos estáticos como una imagen, aparece un error que indica que el objeto "producto" no existe.
Para solucionar esto, le di a cada elemento dinámico v-if="product != undefined" que funciona, pero no parece una muy buena manera de resolver esto.
Estoy iniciando mis datos a través de la tienda así
En mi página hago:
async mounted() { await this.fetchProducts() }, computed: { product() { return this.$store.state.products.producten.filter(product => product.id == this.$route.params.id)[0] } }Luego en mi tienda:
export const state = () => ({ producten: [] }) export const mutations = { setProducts(state, data) { state.producten = data } } export const actions = { async fetchProducts({ commit }) { await axios.get('/api/products') .then(res => { var data = res.data commit('setProducts', data) }) .catch(err => console.log(err)); } } Intenté reemplazar mount( mounted() con: beforeMount() , created() , fetch() pero ninguno parecía funcionar.
También probé:
fetch() {return this.$store.dispatch('fetchProducts')} Loader(v-if="$fetchState.pending") Error(v-if="$fetchState.pending") .product(v-else) // Product details...Podrías usar el enlace fetch para enviar fetchProducts :
<script> export default { fetch() { return this.$store.dispatch('fetchProducts') } } </script> En su plantilla, use el $fetchState.pending para evitar que se muestren los elementos de datos hasta que esté listo:
<template> <div> <Loader v-if="$fetchState.pending" /> <Error v-else-if="$fetchState.error" /> <Product v-else v-for="product in products" v-bind="product" /> </div> </template>