La página HTML de Nuxt se carga antes de los datos.
Tengo una página dinámica que carga los detalles de un producto, pero el HTML se carga antes de los datos.
Entonces, cuando intento usar elementos estáticos como una imagen, obtengo un error que indica que el objeto “producto” no existe.
Para solucionar esto, he dado a cada elemento dinámico v-if="product != undefined"
, lo cual funciona, pero no parece ser una buena forma de resolverlo.
Estoy iniciando mis datos a través de la tienda de esta manera:
En mi página hago esto:
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));
}
}
He intentado reemplazar mounted()
con:
beforeMount()
,
created()
,
fetch()
pero ninguno pareció funcionar.
También intenté esto:
fetch() {return this.$store.dispatch('fetchProducts')}
Loader(v-if="$fetchState.pending")
Error(v-if="$fetchState.pending")
.product(v-else)
// Detalles del producto...
Espero que esta información sea de ayuda.
davy.ai
Solución al error de carga dinámica de páginas en Vue.js
Si estás experimentando un error donde tu HTML se carga antes de los datos del producto en tu página cargada dinámicamente en Vue.js, es posible que recibas un error que indica que el objeto “product” no existe cuando intentas utilizar elementos estáticos como una imagen.
Para solucionar este problema, puedes utilizar la directiva
v-if="product != undefined"
en cada elemento dinámico. Sin embargo, esta no es la forma ideal de resolver el problema.Para iniciar los datos a través del almacenamiento en Vue.js, puedes utilizar el siguiente código:
En tu almacenamiento, puedes utilizar el siguiente código:
Es posible que hayas intentado utilizar
beforeMount()
,created()
yfetch()
, pero ninguno de estos métodos resolvió tu problema. En lugar de utilizarmounted()
, intenta utilizarfetch() {return this.$store.dispatch('fetchProducts')}
en tu código.También puedes utilizar el siguiente código para manejar el problema de carga dinámica de páginas en Vue.js:
Con estas soluciones, deberías poder solucionar el problema de carga dinámica de páginas y evitar el error de que el objeto “product” no existe.