Component B

<template>
  <div class="container">
    <table class="table table-hover" id="tblScores">
      <tbody>
        <tr>
          <th scope="row">Date</th>
          <td style="text-align: left">{{this.date}}</td>
        </tr>
        <tr>
          <th scope="row">Category</th>
          <td style="text-align: left">{{this.action}}</td>
        </tr>
        <tr>
          <th scope="row">Comment</th>
          <td style="text-align: left">{{this.details}}</td>
        </tr>
      </tbody>
    </table>

    <button type="submit" class="btn btn-primary float-right" @click.prevent="$emit('close')">Close</button>
    <button class="btn btn-primary float-sm-right" style="margin-right:10px" @click.prevent="deleteItem()">Delete</button>
    <button class="btn btn-primary float-sm-right" style="margin-right:10px" @click.prevent="editItem()">Edit</button>
    <EditComment v-bind:comment-rec-id="commentRecId" v-if="showEdit"></EditComment>
  </div>
</template>

<script>
import * as $ from "jquery";
import EditComment from "./EditComment.vue";


export default {
  props: ["commentRecId"],
  data: function() {
    return {
      showEdit: false,
      date: "",
      action: "",
      details: "",
    };
  },

  mounted: function() {
    this.loadComments();
  },
  components: {
    EditComment
  },
  methods: {
    loadComments: function() {
      console.log("this.ShowEdit in ShowComment: " + this.showEdit);
      console.log("ShowEdit this.commentRecId: " + this.commentRecId);
      var playerID = this.$store.state.selectedPlayer.ID;
      //var baseUrl = "/DEV/BBUlm" + "/_api/web/lists/";
      var baseUrl = this.$store.state.baseUrl;
      var listName = "Comment";
      var filter = "$filter=ID eq '" + this.commentRecId + "'";
      baseUrl += "GetByTitle('" + listName + "')/items?" + filter;
      var $this = this;

      $.ajax({
        url: baseUrl,
        type: "GET",
        headers: {
          Accept: "application/json;odata=verbose"
        },
        async: false,
        success: function(data, textStatus, xhr) {
          $this.commentsData(data.d.results);
        },
        error: function(xhr, textStatus, errorThrown) {
          alert("error:" + JSON.stringify(xhr));
          $("#start" + "records").html(" [0]");
        }
      });
    },
    commentsData: function(data) {
      //this.date = data[0].Date;
      this.date = this.getJSONDateAsString(data[0].Date, "dd.MM.yyyy");
      this.action = data[0].Category;
      this.details = data[0].Comment;
    },
    getJSONDateAsString: function(jsdatevalue, returnFormat) {
      if ((jsdatevalue == "") | (jsdatevalue == null)) {
        return "";
      }
      return new Date(jsdatevalue).toString(returnFormat);
    },
    deleteItem: function() {
      let siteUrl = 'https://thesite.sharepoint.com/sites/Playercard/';
      let clientContext = new SP.ClientContext(siteUrl);
      let oList = clientContext.get_web().get_lists().getByTitle('Comment');
      let oListItem = oList.getItemById(parseInt(this.commentRecId));
      oListItem.deleteObject();
      clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded1), Function.createDelegate(this, this.onQueryFailed1));
      this.deleteFromHistory();
    },

    onQuerySucceeded1: function(){
      console.log('Item deleted: ' + this.commentRecId);
    },

    onQueryFailed1: function(sender, args){
      console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
    },

    deleteFromHistory: function(){
      let siteUrl = 'https://thesite.sharepoint.com/sites/Playercard/';
      let clientContext = new SP.ClientContext(siteUrl);
      let oList = clientContext.get_web().get_lists().getByTitle('History');
      var statID = this.commentRecId;
      // console.log("statID: " + statID);

      let camlQuery = new SP.CamlQuery();
      camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'CorrespondingListID\'/>' +
              '<Value Type=\'Text\'>'+statID+'</Value></Eq></Where></Query></View>');

      var collListItem = oList.getItems(camlQuery);
      clientContext.load(collListItem);
      console.log("collListItem: " + collListItem);

      // First we much execute the query to retrieve the items
      clientContext.executeQueryAsync(()=> {
                // Now colListItem is a collection, we must iterate through it
                var listItemEnumerator = collListItem.getEnumerator();

                while (listItemEnumerator.moveNext()) {
                  var item = listItemEnumerator.get_current();
                  // if we try item.deleteObject() the collection will be modified and it will throw an exception
                  oList.getItemById(item.get_id()).deleteObject();
                }
                // Finally execute the delete statements
                clientContext.executeQueryAsync(
                        () => console.log('Item(s) deleted')),
                        () => console.log('Failed to delete item(s)');
              },
              ()=>console.log('Failed to retrieve items'));
      location.reload();
    },

    onQuerySucceeded2: function(){
      console.log('History Comment deleted: ' + this.commentRecId);

    },

    onQueryFailed2: function(sender, args){
      console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
    },

    editItem: function(){
      this.showEdit = true;
      console.log("editItem function() called!");
      var playerID = this.$store.state.selectedPlayer.ID;

      this.$modal.show(
              EditComment,
              {
                text: playerID
              },
              {
                draggable: true,
                width: 400,
                height: 400
              })
    }
  }
};
</script>

<style scoped>
.v--modal {
  padding-top: 15px;
  padding-left: 10px;
}
/* #tblScores tr,
#tblScores td,
#tblScores th {
  border: 0 !important;
} */
</style>