Hi,
it seems that when there's some oddity or whatever (couldn't google anything nor find previous issues) with asyncData() call happening on the server - and rendering. But when the page finishes loading on the client all the data disappears because the data it uses were used from getters rather than just properties. Those are not transferred to the client (presumably due to JSON serializing the data). Is there any reasonable way around it because when it comes to an array (list) of objects it becomes incredibly messy.
We cobbled together a snippet like this, but it is unusable when it comes to array/map/whatever.
async asyncData ({ app, params }) {
let user = await app.$api.users.fetchUser('@' + params.user)
let color = colorize(user.login)
return {
_user: user.data,
color,
userLogin: params.user
}
},
computed: {
user () {
return new User(this.$data._user)
}
where the main User class is
class User extends Entity {
get login () {
return this._data.login || null
}
set login (val) {
this._data.login = val
}
... etc
We can see without the computed
hack only the raw values without the underlying object so all the setters/getters get lost without manual recasting in the computed.
And no, SSR is there on purpose (so that googlebot/.. can actually index it). So what's the correct way to handle this?
Thanks in advance for any help. Ashley
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2185">#c2185</a>)</em></sub></div>