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