[FIXED] How to get 'get' method working in vue 3 modal

Issue

I have a table of entries and trying to created a modal to view the details of the entry. However, the modal is unable to get the info and I believe that it cannot access the method within the modal as the cause, but I am not sure how to resolve this.

my code is as follows.

entryList.vue

 <div>
     <button class="my-button-style details-button" 
     @click="displayDetailsModal(entries.id)">Details</button>
 </div>

<div>
    <DetailsModal v-show="showDetailsModal" :detailID="selectedDetailsID" @close-modal="hideDetailsModal" />
</div>

<script>
 import DetailsModal from '../components/DetailsModal.vue'

export default
{

components: { DetailsModal },
name: "entryList",
data()
{
    return {
        selectedDetailsID: null,
        showDetailsModal: false,

        //array to store get values from api
        entryList:[],

    }
},
 methods:{
displayDetailsModal(id)
{
    this.selectedDetailsID = id;
    //set modal visbility to true
    this.showDetailsModal = true
},
hideDetailsModal()
{
    //set modal visbility to false
    this.showDetailsModal = false
},

</script>

DetailsModal.vue

<div class="modal-overlay" @click="$emit('close-modal')">

  <div class="modal" @click.stop>
    {{detailID}}
    <button @Click="getDetail()">Get Details </button>
    <button @Click="$emit('close-modal')">Close </button>
  </div>

  <div class="close" @click="$emit('close-modal')">
    <img class="close-img" src="../assets/close.jpg" alt="" />
  </div>

</div>

 <script>

 import axios from "axios"
export default {
props: ["detailID"],
methods: {
//Refresh the page here   
reloadPage() {
  window.location.reload();
},
async getDetail(){
    await axios.get('https://testapi.io/api/something/resource/details/' + $this.detailID).then(() =>{
                 //Perform Success Action
                 this.getData()
             }).catch((err) => console.error(err));
        
   }
 }

}

Solution

First of all, there is a typo error here.

$this.detailID

It should be

this.detailID

Also, after you send the HTTP request, you didn't get the response value and assign it to data variable to show it in the modal

export default {
  data() {
     details: null;
  },
  methods: {
async getDetail(){
    await axios.get('https://testapi.io/api/something/resource/details/' + $this.detailID).then((response) =>{
                 //Perform Success Action
                 this.details = response
                 this.getData()
             }).catch((err) => console.error(err));
        
   }
 }
  }
}

Answered By - Mina

Answer Checked By - Terry (PHPFixing Volunteer)