Develop an E-Commerce App Using Java, Spring Boot and Vue.js/

...

/

Building the UI for Products: Editing a Product

Building the UI for Products: Editing a Product

Learn how to edit the product on the page.

We'll cover the following...

Introduction

We will approach the task using the following steps:

  1. Create a file called EditProduct.vue in the views/Product directory.
  2. Create a new route for editing, such as /admin/product/:id.

The EditProduct.vue view

With this view, we’ll edit a particular product from the products displaying the page.

Create a file called EditProduct.vue in the src/views/Product folder.

<template>
  <div class="container">
    <div class="row">
      <div class="col-12 text-center">
        <h3 class="pt-3">Edit Product</h3>
      </div>
    </div>
  </div>
</template>
<script>
var axios =  require('axios');
import swal from 'sweetalert';
export default {
  data(){
    return {
      id : null,
      categoryId : 0,
      name : null,
      description : null,
      imageURL : null,
      price : 0,
      productIndex : null
    }
  },
  props : ["baseURL", "products", "categories"],
  methods : {
   
  },
  mounted() {
    }
}
</script>
<style scoped>
h4 {
  font-family: 'Roboto', sans-serif;
  color: #484848;
  font-weight: 700;
}
</style>

Before we move on to designing or structuring the component, we need to ensure we have all the prerequisites. Therefore, let’s focus on the script part of our component.

The props attribute

We ...