[Vuejs]-Modal not displayed in Vuejs

by

0👍

I noticed that show() and hide() never been called from your code. And from the document provided by vue-js-modal. I noticed that their demo use show() method rather than v-if directive to show modal. Please try remove v-if and replace setting value of showmodal with call method show() and hide(), just like following code snippet. 

getskudetails(){
    let url = "http://localhost:5000/details/"+ this.sku
    console.log(url)
    axios.get(encodeURI(url)).then((resp)=>{
        this.modalDetails ={ "final":resp.data.response.Results.Results[0] }
        this.show();

    }).catch(err => {
        console.log("we got an error the url is " + url)
        console.log(err);
    })

template:

<template>
  <div>
    <h1>test</h1>
      <modal name="hello-world">
        <p>{{ modalDetails.final.price }} </p>
        <p> {{ modalDetails.final.productname}} </p>
      </modal>
  </div>
</template>

BTW, I think it’s better timing to show modal when sku details request is completed because these data will be used for rendering. So in the code snippet I pasted, I moved show modal code to axios resolved callback.

👤Kevin Law

Leave a comment