Vue.js Vuejs中未显示模式

我正在使用库创建一个模态组件来显示信息。在我的模态组件中，数据通过父级传递，父级将变量设置为显示模态或不显示模态。但我无法显示模态。 请查看我的代码，如果我在哪里出错，请告诉我

模态组件的代码

<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>

{{modalDetails.final.price}}

{{modalDetails.final.productname}

从“axios”导入axios
导出默认值{
名称：“ModalDisplay”，
道具：['skuDetails']，
数据（）{
返回{
模态细节：{}，
showmodal:错误
}
},
观察：{
sku:函数（）{
这个文件名为
}
},
计算：{
sku:函数（）{
返回此文件。详细信息
}
},
方法：{
获取详细信息（）{
让url=”http://localhost:5000/details/“+this.sku
console.log（url）
get（encodeURI（url））。然后（（resp）=>{
this.modalDetails={“final”：resp.data.response.Results.Results[0]}
}).catch（错误=>{
log（“我们得到一个错误，url是”+url）
控制台日志（err）；
})
this.showmodal=true
},
显示（）{
这个.$modal.show（'hello-world'）；
},
隐藏（）{
这是.$modal.hide（'hello-world'）；
}
}
}

我在main.js中导入了vue 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/>'
 })

从“Vue”导入Vue
从“./App”导入应用程序
从“vue js modal”导入VModal
Vue.use（VModal）
Vue.config.productionTip=false
export const EventBus=new Vue（）；
/*eslint禁用无新*/
新Vue({
el:“#应用程序”，
组件：{App}，
模板：“”
})

我注意到

show（）

和

hide（）

从未从代码中调用过。以及来自vue js modal提供的文档。我注意到他们的演示使用了

show（）

方法而不是

v-if

指令来显示模态。请尝试删除

v-if

，并用调用方法

show（）

和

hide（）

替换showmodel的设置值，就像下面的代码片段一样

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>

测试
{{modalDetails.final.price}}

{{modalDetails.final.productname}

---

顺便说一句，我认为最好在sku详细信息请求完成时显示modal，因为这些数据将用于渲染。因此，在我粘贴的代码片段中，我将显示模式代码移动到axios解析回调

我尝试了你建议的改变。但不幸的是，它不起作用。您是否从模板中删除了

v-if

指令？是的，凯文，我这样做了。但即使它不工作，模态也不会显示。在VueThat中是否有其他方法来创建模态？奇怪的是，实际上我已经在我这边测试了您的代码，模态按照我的方式显示。因此，请记录

show（）

方法并确保它已执行。至于另一个选择，我建议您使用一个非常好的UI框架，Vue应用程序中包括了模态对话框和其他UI组件。成功了。但是它看起来不是很友好。我将试用您建议的新框架，并让您知道