1

我正在使用这个库来创建一个模态组件来显示信息。在我的模态组件中，数据通过 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>

我在 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/>'
 })
4

1 回答 1

0

我注意到了这一点，show()并且hide()从未从您的代码中调用过。并且来自vue-js-modal提供的文档。我注意到他们的演示使用show()方法而不是v-if指令来显示模态。请尝试使用 call 方法和替换showmodalv-if的设置值，就像下面的代码片段一样。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 modal code 移至 axios 解析回调。

于 2018-05-03T07:28:41.263 回答