Laravel and Vue: Creating a Portfolio website with a CRUD admin panel — Chapter Three

Create and Read the Masthead

Recap: We have the abilities to display text and images based on databases. Text can be read straight from the database, but with images we get the image path and render it in the img tag to display the image.

Now: We are going to take these abilities and combine them in a ProfileEditor component. Before that, we must do some cleaning.

Photo by The Honest Company on Unsplash

Cleaning App.vue

App.vue’s currently has bits of code that are no longer required. {{imagepath}} below the img tag is a waste now. We only needed it to see if we have a problem getting data()’s imagepath into the template tag.

<div>
    <masthead :name="name"></masthead>
    <img v-bind:src="'storage/userpics/' + imagepath"/>
    {̶{̶i̶m̶a̶g̶e̶p̶a̶t̶h̶}̶}̶
    <image-uploader></image-uploader>
</div>

You can also get rid of the image-uploader tags because we are going to replace that with the ProfileEditor component.

<div>
    <masthead :name="name"></masthead>
    <img…