How to get 'get' method working in vue 3 modal-CodePudding

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  
     @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  @click="$emit('close-modal')">

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

  <div  @click="$emit('close-modal')">
    <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));
        
   }
 }

}

CodePudding user response：

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));
        
   }
 }
  }
}