Search⌘ K
AI Features
Home
Courses
Develop an E-Commerce App Using Java, Spring Boot and Vue.js

Building the UI for Products: Editing a Product

Explore how to create the EditProduct.vue component to build a product editing interface for an admin panel in Vue.js. Understand routing, props handling, and API calls to update product details dynamically in an e-commerce application.

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.

JavaScript (JSX)
<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 ...