Vue router passing props lost on page refresh

I have a vue page "Edit Post" that relies on the props " post " to display the post content.

 export default {
	    props: ['post'],
		data () {
			return {
				isLoading: false,
				posthandle: this.post,
				PostForm: new Form({
					body: this.post.body,
					title:  this.post.title : '',
					meta_description: this.post.meta_description,
					module: this.post.category,
					module_id: this.post.source_id
				}),
			}
		},

and I have another page "All Post" where I display all post. While looping through the post I add a button that when clicked opens the "Edit Post" page also passing the post as a props.

<tbody>
								<tr class="" v-for="(data,index) in data">
									<td class="has-no-head-mobile is-image-cell">

									</td>
									<td data-label="Title" class="">
										<a :href="data.slug" v-text="data.title "></a>
									</td>
									<td data-label="Author" v-text="data.author" class=""></td>
									<td data-label="Category" v-text="data.category" class=""></td>
									<td data-label="Date" v-text="data.created_at" class=""></td>
									<td data-label="Visits" class="">
										<small title="Sep 19, 2018" class="has-text-grey is-abbr-like"
										v-text="data.visits"></small>
									</td>
									<td class="is-actions-cell">
										<div class="buttons are-small is-right">
											<button type="button" class="button is-danger" @click="deletePost(data.slug, index)">
												<span class="icon is-small">
													<i class="mdi mdi-trash-can"></i>
												</span>
											</button>
											<button type="button" :class="data.followup ? 'is-success' : '' " class="button" @click="togglelink(data.slug, index)">
												<span class="icon is-small" >
													<i v-if="data.followup" class="mdi mdi-link-off"></i>
													<i v-else class="mdi mdi-link"></i>
												</span>
											</button>


											<!-- =======Router button that leads to edit post====== -->

											<router-link :to="{name: 'editpost', params: {post: data}}">
												<button type="button" class="button">
													<span class="icon is-small">
														<i class="mdi mdi-pencil"></i>
													</span>
												</button>
											</router-link>
										</div>
									</td>
								</tr>
							</tbody>

Everything works fine but when I refresh the page, I lost the props.

After googling for some time, the only solution I find is to pass the post id through url, then fetch the post from the backend using Axios.

But why should I fetch the data again when I already have it? and that will cause the page to wait a few seconds for the data to be fetched.

Is there another solution to this? Thank you for helping.

yurinascimento

5 years ago

Level 3

Hi,

We have some ways to fix this:

You pass the post via prop so, if you refresh the page, the prop are lost, to workaround this as you say, you can pass as query the post ID and keep the post via prop, then in the mounted or created event of you component, you can check if the post prop exist, if not, you check if the query ID exist.

Another way I usualy make is load in the page the Model I want and push to Vue, to not use Axios.

// blade view
<script>
const MODEL = @json($model);
</script>

And in the component I can check

//...
props: ['post'],
data(){
	form: {}
},
methods(){
	async load(id) { /*  ... axios ... */ }
},
async created(){
// first check if prop exist
	if(this.post) return this.form = this.post;

// check if a model exist on the page
	if(window.MODEL) return this.form = window.MODEL;

//check the query ?id=0 exist
	if(this.$route.query.id) return this.form = await this.load(this.$route.query.id);

// Invalid request, send back to list, and show some error message...
}
//...

I hope this help...

successdav

5 years ago

Level 4

But if the post does not exist any longer and the query ?id exist, what am I going to do with it then? fetch the data from the DB?

Please or to participate in this conversation.