Vue的組件不可在功能

Question

更新數據，我有兩個VUE組件：

Vue.component('event', { 
    props:['event'], 
    template: ` 
     <span class="pointer" @click="showModal = true"> 
      {{event.evname}} 
      <modal @hide='hideModal' :event="event" :showModal="showModal"> 
       <div slot="title">{{event.evname}}</div> 
       <div slot="content">{{event}}</div> 
      </modal> 
     </span>`, 
    data: function(){ 
     return{ 
      showModal: false 
     } 
    }, 
    methods: { 
     hideModal: function(){ 
      this.showModal = false 
     } 
    } 
}) 

和

Vue.component('modal', { 
    props:['event', 'showModal'], 
    template: ` 
     <div v-if="showModal" class="modalBack"> 
      <div class="container modalPopup"> 
       <div class="row"> 
        <span class="col-lg-11"><slot name="title"></slot></span><span class="pointer col-lg-1" @click="hide">X</span> 
        <slot name="content"></slot> 
       </div> 
      </div> 
     </div>`, 
    methods: { 
     hide: function(){ 
      this.$emit('hide') 
     } 
    } 
}) 

，將模態顯示正常，當我點擊事件名稱，但是，當我嘗試關閉通過點擊模式上的'X'，該事件正在發射'hide'，並且事件下的hideModal方法正在運行，但是我的模態正在運行。當我試圖關閉它時控制檯登錄'this.showModal'時，它顯示false，但是如果我console.log'this'並看看showModal，我看它仍然等於true。

任何想法可能發生什麼？這個想法是showModal將被設置爲false，這將被傳遞給模態組件，並且模態組件將關閉。

Answer 1

這裏的問題在於模態嵌入在span內部，該模塊的點擊處理程序設置了showModel = true。所以當你點擊X來關閉模式時，你也是也是點擊跨度。 showModal設置爲false，然後立即設置爲true。

要解決該問題，請將模態移到量程外。

template: ` 
    <div> 
    <span class="pointer" @click="showModal = true"> 
     {{event.evname}} 
    </span> 
    <modal @hide='hideModal' :event="event" :showModal="showModal"> 
     <div slot="title">{{event.evname}}</div> 
     <div slot="content">{{event}}</div> 
    </modal> 
    </div> 
`,