Question

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

模态组件的代码

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

我在main.js中导入了vue-js-modal

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，并使用调用方法show()和hide()替换 showmodal 的设置值，就像下面的代码段一样。

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 modal代码移动到axios解析回调。

模态未显示在Vuejs中

1 个答案: