Ant Design of Vue （5）使用confirm 调用其他方法返回时，使用this.$notification作为返回信息提示时报属性示定义的错误解决方案

最新推荐文章于 2024-01-16 14:23:39 发布
最新推荐文章于 2024-01-16 14:23:39 发布
阅读量1.9k 收藏 1
点赞数 1
分类专栏： Vue实战记录 文章标签： 其他 html5
未经作者授权，禁止转载
本文链接：https://blog.csdn.net/weixin_39237340/article/details/120362498
版权

一.使用confirm进行确认后

二.返回成功或失败信息的时候使用this.notification作为提示时报错

通知提醒框 Notification - Ant Design Vue (antdv.com)

 报错提示$notification没有定义：

 三.解决方法，在确认框中用到的当前作用域时，this需要提前替换为局部变量，否则浏览器会提示无法获取该属性。

五.效果

  点击确认后，

 弹出结果

 参考文章：(34条消息) 前端问题集（2）：Ant Design Vue 中使用 this.$confirm 时，this调用其他方法失败。_Yooao的博客-CSDN博客

小丫头呀
关注
专栏目录
Ant Design Vue Modal 对话框 this.$warning is not a function
qwe122343的博客
03-24 2977
Modal 对话框十分常用，但用官网这个信息提示模板竟然报错了 warning() { this.$warning({ title: 'This is a warning message', content: 'some messages...some messages...', }); }, 简单粗暴的结论： this.$warning应该改成Modal.warning 改后： warning() { Modal.warning({ title: 'This
Element UI学习8--this.$prompt,this.$message,this.$confirm,this.$notify
hanrabbit的博客
01-26 8876
1、this.$prompt 输入框弹窗 if (object == undefined) { this.$prompt('请输入', '添加优惠券分类', { confirmButtonText: '确定', cancelButtonText: '取消' }).then(async ({ value }) => { }) 如图： 2、this.$message 消息提示 if (re
8,element中Notification组件（this.$notify）自定义样式
木卯彳亍的博客
04-12 4172
修改前： 修改后： let html = '<div class="alertTile"></div>' + '<div class="alertTile_1">' + "报警" + '</div>' + "<div style='word-wrap:break-word;color:white'>" + "目前温度" + ":" + "100" + "摄氏度" + "<br/>" + "报警时间："+this.forma
element中Notification组件（this.$notify）自定义样式
askuld的博客
09-01 2627
/点击事件回调console.log("自动关闭，流程。。");console.log("手动确认，流程。。");},
前端问题集（2）：Ant Design Vue 中使用 this.$confirm 时，this调用其他方法失败。
Yooao的博客
06-26 5577
Ant Design Vue 中使用 this.$confirm 时，this调用其他方法失败，提示是该方法未定义。
【ElementUI组件刨析】Notification组件（全网最细踩坑日记）
io_123io_123的博客
10-06 8219
ElementUI库Notification 组件全面刨析，功能具体介绍，典型案例，全网最全
Element组件$Notification 通知使用指北
m0_60234005的博客
12-01 580
Element组件$Notification 通知使用指北
vue写的confirm确认框，loading加载中，message提示消息
12-06
vue写的confirm确认框，loading加载中，message提示消息 在vue的模板里引用 import message from './tips/message/index'; import confirm from './tips/confirm/index'; import loading from './tips/loading/index...
Ant Design Vue 中遇到的坑（一） this.$parent 等的失效问题
陈乾的博客
12-31 3459
一、发生场景 在使用Ant Design 时，因为需求更改，在原本的代码外层又套上了UI组件，导致了原本在子组件中使用父组件的属性和方法失效。this.$parent.xx is not a function … 例如使用了： <a-tabs> <a-tab-pane key="1"> <div /> </a-tab-pane> </a-tabs> 二、原因 在使用Ant Design 的UI组
VUE 子组件中 THIS.$PARENT 无法调用父组件的自定义方法，TypeError: this.$parent.xxx is not a function的问题
白给少年
05-20 4315
因为是小白，所以这个问题废了我九牛二虎之力，话不多说。 简单描述：遇到了在子组件中利用this.parent调用父组件的自定义方法，报TypeError:this.parent调用父组件的自定义方法，报TypeError: this.parent调用父组件的自定义方法，报TypeError:this.parent.xxx is not a function的错，可是在父组件明明定义了该方法，随即就在子组件中打印了this.parent，通过控制台的打印，发现打印出来的this.parent，通过控制台的打印
ant design vue中通知提醒框Notification的使用
i_am_a_div的博客
11-19 7026
效果：点击接口，出现提示弹框，数据获取到后在消失 <template> <a-button type="primary" @click="openNotification"> Open the notification box </a-button> </template> <script> const close = () => { console.log( 'Notification was closed.
vue 执行函数this_web前端：vue中this在回调函数中的使用
weixin_32024145的博客
12-24 2210
回调函数就是一个通过函数指针调用的函数。如果你把函数的指针(地址)作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数时，我们就说这是回调函数。vue中this在回调函数中的使用this在各类回调中使用:如果是普通函数是没法使用的所以需要先将this.变量赋值给新的变量,然后才能在回调函数中使用例如:refund:function(id){if(!this.url.refund){this...
032_Notification通知
aihiao的专栏
02-28 3524
1. Notification通知 1.1. Notification通知, 悬浮出现在页面角落, 显示全局的通知提醒消息。 1.2. Options 参数 说明 类型 可选值 默认值 title 标题 string 无 无 message 说明文字
Notification 通知，循环通知
m0_50664127的博客
09-06 1105
默认情况下，经过一段时间后 Notification 组件会自动关闭，Notification 组件提供通知功能。在最简单的情况下，你可以设置title。以上是单个按钮实现，实现多个展示效果。字段，用于设置通知的标题和正文。方法，接收一个options。但是通过设置duration。，可以控制关闭的时间间隔，Element 注册了。字段和message。特别的是，如果设置为。，单位为毫秒，默认为。
Vue提示框组件vue-notification使用实例演示
小蓝枣的博客
03-19 829
安装方法： 通过 npm install vue-notification 就能使用了。 导入方法： import Notifications from 'vue-notification'; Vue.use(Notifications); 并且需要在 App.vue 里加入 。 其中 duration 参数为持续时间。 position 参数为提示位置，前面的值为纵向的顶部 top 和底部 bottom
【Ant Design Vue】Notification/Message没有反应、$notification/$message undefined 已解决
weixin_44752429的博客
01-21 4864
先上官方文档：Ant Design Vue Notification（通知提醒框） 光把官方文档里的代码粘贴过来是无法直接使用的，这里的处理方式和使用Ant Design Vue的普通组件也不一样，需要在Vue的原型链中增加notification属性，这样在其他组件中才可以通过$notification使用。 在main.js中修改Vue原型链： import Vue from 'vue' import App from './App' //从Ant Design Vue导入notification，注
ant notification的使用
ast_5921的博客
11-25 1262
import { Button, notification } from 'antd'; queryDemanDetail_two = () => { const openNotificationWithIcon = type => { switch (type) { case 'success': notification[type](...
element-ui报错：Uncaught (in promise) cancel，在使用this.$confirm中报错
changyana的博客
10-13 537
这是因为this.$confirm的使用是要带.catch()函数的，如果删除了则会出现如上报错。点击了关闭按钮就会报错。
this.$notify is not a function,vue使用element-ui的Notification组件时报错this.$notify is not a function
最新发布
Sreadfast的博客
01-16 813
今天需要封装element中的Notification组件，按网上朋友们的教程，创建js文件，封装需要调用的方法，main.js中全局导出，然后在页面使用的时候一直会报下面这个错。注意：解决这个报错的方法就是在传参后面将当前页面的this以参数的形式传入，然后封装组件的时候用that接收即可。网上大多数说法是引入错误导致的，但是我尝试后并未解决。给大家分享下我的解决办法。js文件内部封装方法，使用的是notifyBox这个方法。名称 Notification.js。main.js中引入。
vue 使用this.$router.push()方法报错Cannot read properties of undefined (reading '$nextTick')
01-05
这个错误通常是因为在使用`this.$router.push()`方法时，没有在Vue实例中正确地引入Vue Router。为了解决这个问题，你可以按照以下步骤进行操作： 1. 确保你已经正确地安装和配置了Vue Router。你可以在项目的`main.js`文件中引入Vue Router并将其作为Vue实例的插件使用。例如： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' Vue.use(VueRouter) const router = new VueRouter({ // 路由配置 }) new Vue({ router, render: h => h(App) }).$mount('#app') ``` 2. 确保你在使用`this.$router.push()`方法之前已经正确地定义了路由。你可以在Vue Router的配置文件中定义路由，并在需要跳转的地方使用`this.$router.push()`方法。例如： ```javascript // 路由配置文件 const routes = [ { path: '/home', component: Home }, { path: '/detail', component: Detail } ] // 创建Vue Router实例 const router = new VueRouter({ routes }) // 在组件中使用this.$router.push()方法 this.$router.push('/detail') ``` 3. 如果你已经按照上述步骤进行操作，但仍然遇到问题，请确保你的Vue实例中正确地引入了Vue Router。你可以在Vue实例的`created`生命周期钩子函数中使用`this.$nextTick()`方法来确保Vue Router已经完全加载。例如： ```javascript new Vue({ router, created() { this.$nextTick(() => { // 在这里使用this.$router.push()方法 this.$router.push('/detail') }) }, render: h => h(App) }).$mount('#app') ``` 希望这些步骤能够帮助你解决问题。如果你还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小丫头呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值