Vue+Semanti-UI: 模态元素变了，只能运行 seccuess一次

Question

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

查看方法：

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

第一次点击，模态显示，第二次点击没有任何反应，我发现 div class='ui dimmer modals page transition hidden' 的语义变化模态到 root，如何解决

Answer 1

Semantic 正在将其从您的 $(this.$el) 中删除，因此下次它找不到它。

当您使用全局 $ 和一个 id:

时它会起作用

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

查看更新 fiddle。

Answer 2

如果您还想在模态中使用 Vue 变量，则需要克隆模态并仅显示克隆的版本。

使用这种方法，Vue 仍然能够跟踪原始模态，因为语义不会将其从 DOM.

中删除

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

Vue+Semanti-UI: 模态元素变了，只能运行 seccuess一次

Vue+Semanti-UI: modal element changed,only can run seccuess once

semantic-ui

vuejs2