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

Building the UI for Product API: Adding a Product

Explore how to build a user interface in Vue.js to add new products within an e-commerce admin panel. Learn to create a product form with fields for category selection, name, description, image URL, and price. Understand how to bind form inputs using v-model, set up routing, and implement the addProduct function to submit new products effectively.

We'll cover the following...

Delete the “About” page

We won’t be using the “About” page, so let’s delete the About.vue file and router code.

C++
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  }

Create the template

Let’s create a file called AddProduct.vue with a container class. It has two properties, baseURL and categories. We’ll have a dropdown to select which category to add the product to.

We’ll have five variables that are ...