amazone/admin/pages/products/_id.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">Update product</h2>
          <form action="">
            <!-- Category DropDown -->
            <div class="a-spacing-top-medium">
              <label for="">Category</label>
              <select  v-model="categoryID" 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 v-model="ownerID" 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 v-model="title" :placeholder="product.title" type="text" class="a-input-text" style="width: 100%"/>
            </div>

            <!-- stockQuantity input-->
            <div class="a-spacing-top-medium">
              <label for="" style="margin-bottom: 0px;">stockQuantity</label>
              <input v-model="stockQuantity" :placeholder="product.stockQuantity" type="number" 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 v-model="price" :placeholder="product.price" 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 v-model="description" :placeholder="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 @change="onFileSelected" type="file" />
                  <p style="margin-top: -70px">{{ fileName }}</p>
                </label>
              </div>
            </div>
            <hr/>

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

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

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

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

      return {
        categories: catResponse.categories,
        owners: ownerResponse.owners,
        product: productResponse.product
      }
    } catch (err) {
      console.log(err)
    }
  },

  data () {
    return {
      categoryID: null,
      ownerID: null,
      title: '',
      price: null,
      description: '',
      selectedFile: null,
      fileName: '',
      stockQuantity: null
    }
  },

  methods: {
    onFileSelected (event) {
      this.selectedFile = event.target.files[0]
      console.log(this.selectedFile)
      this.fileName = event.target.files[0].name
    },

    async onUpdateProduct () {
      let data = new FormData()
      data.append('title', this.title)
      data.append('price', this.price)
      data.append('stockQuantity', this.stockQuantity)
      data.append('description', this.description)
      data.append('ownerID', this.ownerID)
      data.append('categoryID', this.categoryID)
      data.append('photo', this.selectedFile, this.selectedFile.name)

      let result = await this.$axios.$put(`http://localhost:3000/api/products/${this.$route.params.id}`, data)

      this.$router.push('/')
    }
  }
}
</script>