解決element-ui中Popconfirm氣泡確認框的事件不生效問題
更新時間：2022年07月29日 10:46:23 作者：頑強的韭菜
這篇文章主要介紹了解決element-ui中Popconfirm氣泡確認框的事件不生效問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
element-ui中Popconfirm氣泡確認框的事件不生效
今天在使用到element-ui中的Popconfirm 氣泡確認框組件時，需要在點擊確定按鈕時觸發(fā)綁定的事件
按照官方文檔提供的事件類型為其綁定的事件，但并沒有被觸發(fā)
以下是官網(wǎng)給出的事件類型
<el-popconfirm title="這是一段內(nèi)容確定刪除嗎？" @confirm="delete">
<el-button slot="reference">刪除</el-button>
</el-popconfirm>上面代碼中定義了事件@confirm="delete"，但點擊確定按鈕之后，并沒有執(zhí)行綁定的方法delete
正確方式：
<el-popconfirm title="這是一段內(nèi)容確定刪除嗎？" @onconfirm="delete">
<el-button slot="reference">刪除</el-button>
</el-popconfirm>觸發(fā)方式是用@onconfirm定義事件，而不是@confirm，之后再點擊確認按鈕就可以觸發(fā)綁定的方法了。同樣取消按鈕的事件也需要使用@oncancel來綁定才可以觸發(fā)。
(2.15.6版本解決)elementui popconfirm氣泡確認事件失效
問題：
- confirm事件無效
- cancel事件無效
解決：2.15.6版本已解決
- 官方文檔書寫錯誤
- 更改確認事件名：onConfirm
- 更改取消事件名：onCancel
官方文檔：
官方源碼：
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue組件數(shù)據(jù)傳遞、父子組件數(shù)據(jù)獲取，slot,router路由功能示例
這篇文章主要介紹了vue組件數(shù)據(jù)傳遞、父子組件數(shù)據(jù)獲取，slot,router路由功能,結(jié)合實例形式分析了vue.js組件數(shù)據(jù)傳遞、路由相關(guān)概念、原理及相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
本文主要介紹了el-form表單實現(xiàn)校驗的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-07-07
這篇文章主要介紹了9102年webpack4搭建vue項目的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-02-02
本篇文章主要介紹了在vue-cli項目中使用bootstrap的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
解讀計算屬性和watch監(jiān)聽的區(qū)別及說明
計算屬性是基于它們的依賴進行緩存的,只有在它的相關(guān)依賴發(fā)生改變時才會重新求值,而watch則是一個更為通用的監(jiān)聽器,它可以在數(shù)據(jù)變化時執(zhí)行異步操作或開銷較大的操作2025-01-01
這篇文章主要介紹了vue 簡單自動補全的輸入框的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
vue2中組件互相調(diào)用實例methods中的方法實現(xiàn)詳解
vue在同一個組件內(nèi),方法之間經(jīng)常需要互相調(diào)用,下面這篇文章主要給大家介紹了關(guān)于vue2中組件互相調(diào)用實例methods中的方法實現(xiàn)的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
本文主要介紹了element中form組件prop嵌套屬性的問題解決，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家介紹了vue篇之事件總線EventBus使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
vue項目中常用解決跨域的方法總結(jié)(CORS和Proxy)
在vue項目中,一般我們會遇到跨域的問題,vue項目中解決跨域是非常簡單的,下面這篇文章主要給大家介紹了關(guān)于vue項目中常用解決跨域的方法,主要解釋CROS和Proxy兩種方式,需要的朋友可以參考下2022-12-12