Part 3: PUT and DELETE Requests (Update and Delete a Publisher):

To update a publisher, we need to get its id that's passed to the URL. In Part 2, if you click on Edit button of any publisher, the app will direct you to MyPublisher page with url: /publishers/:id.

Create a file MyPublisher.vue under the component folder and add the following code.

<template>
  <div v-if="currentPublisher" class="edit-form">
    <h4>Edit Publisher <span class="badge bg-info text-light" style="--bs-text-opacity: .5;">{{currentPublisher.name}}</span></h4>
    <form>
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name"
          v-model="currentPublisher.name"
        />
      </div>
      <div class="form-group">
        <label for="publisher_address">Address</label>
        <input type="text" class="form-control" id="publisher_address"
          v-model="currentPublisher.publisher_address"
        />
      </div>
      <div class="form-group">
        <label for="publisher_contact">Contact</label>
        <input type="text" class="form-control" id="publisher_contact"
          v-model="currentPublisher.publisher_contact"
        />
      </div>
    </form>
    <button class="btn btn-danger btn-sm"
      @click="deletePublisher"
    >
      Delete <i class="fa-solid fa-trash-can"></i>
    </button>
    &nbsp;<button type="submit" class="btn btn-warning btn-sm"
      @click="updatePublisher"
    >
     Update <i class="fa-solid fa-pencil"></i>
    </button>
    &nbsp;<router-link to="/" class="btn btn-l">Cancel <i class="fa-solid fa-xmark"></i></router-link>
    <br/> <br/>
    {{ message }}
  </div>
  <div v-else>
    <br />
    <p>Please click on a Publisher...</p>
  </div>
</template>
<script>
import PublisherDataService from "../services/PublisherDataService";
export default {
  name: "my-publisher",
  data() {
    return {
      currentPublisher: null,
      message: ''
    };
  },
  methods: {
    getPublisher(id) {
      PublisherDataService.get(id)
        .then(response => {
          this.currentPublisher = response.data;
          console.log(response.data);
        })
        .catch(e => {
          console.log(e);
        });
    },
    updatePublisher() {
      PublisherDataService.update(this.currentPublisher.id, this.currentPublisher)
        .then(response => {
          console.log(response.data);
          this.message = 'The publisher was updated successfully!';
        })
        .catch(e => {
          console.log(e);
        });
    },
    deletePublisher() {
      PublisherDataService.delete(this.currentPublisher.id)
        .then(response => {
          console.log(response.data);
          this.$router.push({ name: "publishers" });
        })
        .catch(e => {
          console.log(e);
        });
    }
  },
  mounted() {
    this.message = '';
    this.getPublisher(this.$route.params.id);
  }
};
</script>
<style>
.edit-form {
  max-width: 400px;
  margin: auto;
}
</style>

Complete source code is available here to download: Attach:vue-advera.zip

• Extract the Zip file
• Import it to your IDE
• Open a terminal and make sure your are inside vue-advera folder
• Run your application: npm run serve
• Check it on a browser window using localhost:8081 URL
• Make sure that your Spring Boot application is running