first of all I'm sorry for my bad English, I'm using a translator.
I'm a beginner with VUE and VUE X, there are surely big mistakes.
I have a problem with VUE, currently I am trying to display a publication thanks to its ID.
Here is my DATA :
data(){
return {
list: [this.$store.dispatch('allPublications')],
id:'',
feed: '',
}
},
Here is my STORE action:
publicationId:({commit}, messages) => {
instance.get('/publications/' + messages.id)
.then(function(response){
commit('setMessage', response.data.publication)
console.log(response)
this.feed = response.data.publication.data
})
.catch(function(error){
console.log(error)
})
},
Here is my computed:
computed: {
...mapState({
user: 'profileUser',
publication: 'publicationFeed',
message: 'publicationInfos'
}),
message(){
return this.$store.state.message;
},
},
Here is my state :
setMessage: function(state, message){
state.message = message
},
Here is my template :
<template>
<div class="card-body" @click="publicationId(message.id)">
<span class="badge bg-secondary">{{ message.User.username }}</span>
<div class="dropdown-divider"></div>
<div class="card-text d-flex justify-content-between align-items-md-center">
<p class="card-text d-flex flex-start">{{ message.message }}</p>
</div>
<span class="message__date">{{ message.createdAt.split('T')[0]}}</span>
</div>
<img class="card-img-top" alt="..." :src="message.image">
Some screenshot to help you more :
Before reloading the page, everything is OK
After reloading the page, everything is going wrong
Everything works fine as long as I don't reload the page, as soon as I reload it I get an error, my computed value disappears and I can't get the data from my computed.
I have searched a lot of information without being able to solve this problem, thanks to you for the help!
It seems that i've solved this issue doing this :
data() {
return {
componentLoaded: false,
list: [this.$store.dispatch('allPublications')],
id: '',
feed: '',
}
},
In the mounted :
mounted() {
this.componentLoaded = true;
this.id = this.$route.params.id;
this.$store.dispatch('publicationId', { id: this.$route.params.id })
},
In the computed :
computed: {
message() {
if (!this.componentLoaded) {
return null
} else {
return this.$store.state.message;
}
},
},
And I add a v-if in the template
<template>
<div class="verification" v-if="componentLoaded === true">
<div class="card-body" @click="publicationId(message.id)">
<span class="badge bg-secondary">{{ message.User.username }}</span>
<div class="dropdown-divider"></div>
<div class="card-text d-flex justify-content-between align-items-md-center">
<p class="card-text d-flex flex-start">{{ message.message }}</p>
</div>
<span class="message__date">{{ message.createdAt.split('T')[0] }}</span>
</div>
<img class="card-img-top" alt="..." :src="message.image" />
</div>
<div v-else>
<h1>test</h1>
</div>
It worked for me, I hope it will help for those who needs.