amazone/admin/pages/product.vue

<template>
  <main>
    <div class="container-fluid">

        <div class="col-sm3"></div>
        <div class="col-sm6">
          <div class="a-spacing-top-medium"></div>
          <h2 style="text-align: center">Add a new Product</h2>
          <form action="">
            <!-- Category DropDown -->
            <div class="a-spacing-top-medium">
              <label for="">Category</label>
              <select  class="a-select-option">
                <option v-for="category in categories" :key="category._id" :value="category._id">{{ category.type }}</option>
              </select>
            </div>

            <!-- Owner DropDown -->
            <div class="a-spacing-top-medium">
              <label for="">Owner</label>
              <select  class="a-select-option">
                <option v-for="owner in owners" :key="owner._id" :value="owner._id">{{ owner.name }}</option>
              </select>
            </div>

            <!-- Title input-->
            <div class="a-spacing-top-medium">
              <label for="" style="margin-bottom: 0px;">Title</label>
              <input type="text" class="a-input-text" style="width: 100%"/>
            </div>

            <!-- Price input-->
            <div class="a-spacing-top-medium">
              <label for="" style="margin-bottom: 0px;">Price</label>
              <input type="number" class="a-input-text" style="width: 100%"/>
            </div>

            <!-- Description input-->
            <div class="a-spacing-top-medium">
              <label for="" style="margin-bottom: 0px;">Description</label>
              <textarea placeholder="Provide details product description" style="width: 100%"></textarea>
            </div>

            <!-- Photo input-->
            <div class="a-spacing-top-medium">
              <label for="" style="margin-bottom: 0px;">Photo</label>
              <div class="a-row a-spacing-top-medium">
                <label class="choosefile-button">
                  <i class="fa fa-plus"></i>
                  <input type="file" />
                  <p style="margin-top: -70px">name of the</p>
                </label>
              </div>
            </div>
            <hr/>

            <!--Button-->
            <div class="a-spacing-top-large">
              <span class="a-button-register">
                <span class="a-button-text">Add Product</span>
              </span>
            </div>
          </form>
        </div>
        <div class="col-sm3"></div>

    </div>
  </main>
</template>

<script>
export default {
  async asyncData( { $axios }) {
    try {
      let categories = $axios.$get('http://localhost:3000/api/categories')
      let owners = $axios.$get('http://localhost:3000/api/owners')

      const [catResponse, ownerResponse] = await Promise.all([categories, owners])

      console.log(catResponse)
      return {
        categories: catResponse.categories,
        owners: ownerResponse.owners
      }
    } catch (err) {
      console.log(err)
    }
  }
}
</script>