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 =＆＃39; ui dimmer模态页面过渡隐藏＆＃39;，如何解决它

Answer 1

语义将其从$(this.$el)中删除，以便下次找不到它时。

当您使用全局$和ID：

时，它会起作用

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

请参阅更新的fiddle。

Answer 2

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

通过这种方法，Vue仍然可以跟踪原始模态，因为Semantic不会将其从DOM中删除。

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

Vue + Semanti-UI：模态元素已更改，只能运行seccuess一次

2 个答案: