Linked Questions

Popular Questions

Keeping prop data on page refresh

Asked by At

I am still slightly confused about VueJS props and the sharing of data. Say I have this simple component, it displays a list of profiles. Each profile will have it's own page, defined by it's name and linked to via router-link.

<template>
    <div class="card">
        <div class="card-body">
            <table class="table">
                <tbody>
                    <tr>
                        <th>Profile ID</th>
                        <th>Actions</th>
                    </tr>
                <tr v-for="profile in profiles.data" :key="profile.id">
                    <td>{{profile.id}}</td>
                    <td>
                        <router-link :to="{ name: profile.name, params: {
                             profileImage: profile.image }}" 
                             tag="a" exact> View Profile
                        </router-link>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                profiles: {}
            }
        },
        methods: {
            loadProfiles() {
                axios.get("api/profile").then(({data}) => (this.profiles = data));
            },
        created() {
            this.loadProfiles();
        }
    }
</script>

So when you click on a profile link, I end up on a page like localhost:8000/profile-1, depending on the profile name (in this case I asume the name is profile-1). You will notice that I pass a profileImage parameter, this is the image file location associated with this profile.

So the generic profile component is like so

<template>
    <div id="capture">
        <div class="row">
            <div class="col-12` ">
                <image :file-name = this.fileName></barchart>
            </div>
        </div>
    </div>
</template>

<script>
    import Image from '../components/Image';

    export default {
        components: {
            'image': Image
        },
        data() {
            return {
                fileName: ''
            }
        },
        created() {
            this.fileName = this.$route.params.fileName;
        }
    }
</script>

So pretty straight forward, contains an Image component that will display the image for that profile. And I wont show it all, but the Image component takes the following structure

<template>
    <div>
        <div id="chart">
            <div id="barchart-container">
            </div>
        </div>
    </div>
</template>

<script>
    import * as d3 from 'd3';

    export default {
        props: {
            fileName: {
                type: String,
                required: true
            }
        },
        methods: {
            generateImage () {
               ...   
            }
        },
        created() {
            this.generateImage();
        }
    };
</script>

So my question is this, if I click on the link, I end up on the profile page. This displays an image. This is all fine. However, if I then refresh the page, the image is not displayed anymore, and I get an error stating that the component needs its prop.

So what would I need to do to ensure the prop is not lost of page refresh. Is this even thr correct approach I am taking?

Thanks

Related Questions