Vue公司+ Semanti-UI：模態元素改變，只能運行seccuess一次

<button class="ui button" @click="beforeAdd">添加</button> 

<div class="ui modal"> 
    <div class="header">Header</div> 
    <div class="content"> 
     <div class="description"> 
      <p>Description</p> 
     </div> 
    </div> 
    <div class="actions"> 
     <div class="ui negative right labeled icon button"> 
      取消 
      <i class="remove icon"></i> 
     </div> 
     <div class="ui positive right labeled icon button"> 
      提交 
      <i class="checkmark icon"></i> 
     </div> 
    </div> 
</div>

視圖方法：Vue公司+ Semanti-UI：模態元素改變，只能運行seccuess一次

beforeAdd(){ 
    const modal = $(this.$el).find('.ui.modal') 
    console.log(modal) 
    modal.modal('show') 
}

第一次點擊，模態顯示，第二次點擊什麼都沒有發生，我發現語義變化模式爲根div class ='ui dimmer modals page transition hidden'，如何解決它

來源

2017-02-14 Dreampie

可能創建一個小提琴嗎？ – Saurabh

@Saurabh https://jsfiddle.net/Dreampie/6tm76fus/1/ – Dreampie

語義是從您的$(this.$el)中刪除它，所以下次它找不到它。

show(){ 
    const showModal = $('#mymodal') 
    console.log(showModal) 
    showModal.modal('show') 
}

查看更新後的fiddle：

它，當你與全球$和ID使用工作。

來源

2017-02-15 03:37:45 Saurabh

是的，我知道這一點，但爲什麼要改變dom路徑？ – Dreampie

@Dreampie你可以在不改變Path的情況下做到這一點：https：//jsfiddle.net/6tm76fus/3/ – Saurabh

@Dreampie另一種方法可以是在安裝時將模式保存在變量中，稍後再使用，如下所示：https://jsfiddle.net/6tm76fus/5/ – Saurabh

如果您還想在模態中使用Vue變量，則需要克隆模態並僅顯示克隆版本。

使用這種方法，Vue仍然能夠跟蹤原始模態，因爲語義不會將其從DOM中移除。

beforeAdd(){ 
    const modal = $(this.$el).find('.ui.modal').clone() 
    console.log(modal) 
    modal.modal('show') 
}

來源

2017-06-07 10:24:19

Vue公司+ Semanti-UI：模態元素改變，只能運行seccuess一次

回答

相關問題