Модал не отображается в Vuejs

Question

Я использую эту библиотеку для создания модального компонента для отображения информации. В моем модальном компоненте данные передаются через parent, который устанавливает переменную для показа модального или нет. Но я не могу отобразить модал. Пожалуйста, посмотрите на мой код и дайте мне знать, если я где-то ошибаюсь.

Код для модального компонента

<template>
 <div>

   <div v-if="showmodal">

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

  </div>
 </div>


</template>

<script>
import axios from 'axios'


export default{
name : 'ModalDisplay',
props : ['skuDetails'],

data(){
    return {
        modalDetails : {},
        showmodal : false
    }
},

watch:{
    sku: function(){
        this.getskudetails()
    }
},
computed :{
    sku : function(){
        return this.skuDetails
    }
},
methods:{
    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] }


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

        this.showmodal = true    
    },

show () {
this.$modal.show('hello-world');
},
hide () {
this.$modal.hide('hello-world');
   }
  }
 }
</script>

<style>
</style>

Я импортировал vue-js-modal в main.js

import Vue from 'vue'
import App from './App'

import VModal from 'vue-js-modal'

Vue.use(VModal)

Vue.config.productionTip = false


export const EventBus = new Vue();

/* eslint-disable no-new */
new Vue({
   el: '#app',
   components: { App },
   template: '<App/>'
 })

Answer 1

Я заметил, что show() и hide() никогда не вызывались из вашего кода. И из документа, предоставленного vue-js-modal . Я заметил, что их демонстрация использует метод show() вместо директивы v-if для показа модального режима. Пожалуйста, попробуйте удалить v-if и заменить значение настройки showmodal на методы вызова show() и hide(), как в следующем фрагменте кода.

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

Кстати, я думаю, что лучше показывать модальное время, когда запрос деталей sku завершен, потому что эти данные будут использоваться для рендеринга. Итак, в вставленном мною фрагменте кода я переместил модальный код show в обратный вызов axios resolved.