Ant Design Vue Modal 对话框 this.$warning is not a function

Modal 对话框十分常用,但用官网这个信息提示模板竟然报错了

warning() {
  this.$warning({
    title: 'This is a warning message',
    content: 'some messages...some messages...',
  });
},

简单粗暴的结论:

this.$warning应该改成Modal.warning

在这里插入图片描述
在这里插入图片描述
改后:

warning() {
   Modal.warning({
     title: 'This is a warning message',
     content: 'some messages...some messages...',
   });
 },

使用 Modal 别忘了 Modal 的引入 import { Modal } from 'ant-design-vue';

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 在Vue中使用this.$set(obj, key, value)方法是为了在响应式地更新对象时,能够添加新的属性而不影响数据的响应式更新。但是,当报错_this15.$set is not a function时,通常有以下几个可能的原因和解决办法: 1. Vue版本较低:请确保你的Vue版本是2.3.0及以上。因为在这个版本之前,Vue中的this.$set()方法并不是默认自带的。可以通过查看Vue的版本号来确认是否符合要求。 2. this指向错误:在Vue组件中,确保你在正确的作用域内使用了this.$set()方法。如果是在组件的回调函数或者异步操作中使用,可能会导致this指向发生变化。 3. 被操作的对象不是响应式的:this.$set()只能在响应式的对象上使用,如果传入的对象不是响应式的,会导致报错。可以使用Vue.set()方法或直接在data中声明对象的方式将其转变为响应式对象。 4. Vue的实例被重写:如果在Vue实例被重写之后再使用this.$set()方法,会导致报错。在Vue实例被重写之前或在Vue组件中正常使用this.$set()方法。 综上所述,要解决_this15.$set is not a function报错,首先确保Vue版本符合要求,然后确认使用this.$set()的作用域正确并且被操作的对象是响应式的。如果问题仍未解决,可以进一步检查是否重写了Vue实例。 ### 回答2: 当在Vue中使用this.$set报错_this15.$set is not a function时,通常是因为this指向不正确或者Vue实例没有正确地初始化。 首先,确保你的Vue实例已经成功创建,并且在使用this.$set之前已经完成了初始化。一般情况下,Vue实例的初始化应该在created或mounted钩子函数中完成。 其次,检查this指向是否正确。在Vue组件中,你可以在methods中定义方法,而在方法中使用this来访问Vue实例。如果你有一个异步操作或者回调函数,并且需要在回调函数中使用this.$set,那么在回调函数中可能会丢失正确的this指向。为了确保this指向正确,你可以在异步回调函数之前将this存为一个变量。 示例代码如下: ``` export default { data() { return { message: "Hello Vue!" } }, created() { // Vue实例初始化 // 这里你可以进行一些初始化操作 }, methods: { updateMessage() { // 在回调函数之前存储正确的this指向 const self = this; // 异步操作或者回调函数 someAsyncOperation(function(response) { // 在回调函数中使用正确的this指向 self.$set(self, 'message', response.data); }); } } } ``` 通过以上方法,你应该能够成功使用this.$set来更新Vue实例中的数据,而不再遇到_this15.$set is not a function的错误。 ### 回答3: 在Vue中使用this.$set工具函数来动态修改响应式数据时,出现_this15.$set is not a function_的报错通常是因为this.$set函数的调用方式不正确或者Vue版本过低导致的。 首先,确保你正在使用的是Vue 2.x版本,因为在Vue 1.x版本中并没有this.$set这个函数。 其次,this.$set函数是用来给Vue实例添加响应式属性的,所以调用时需要传入三个参数,分别是对象本身、属性名和属性值。例如: ```javascript this.$set(this.obj, 'prop', value) ``` 其中,this.obj是你想要添加属性的对象,'prop'是属性名,value是新的属性值。 另外,如果你在自定义组件的方法中使用this.$set,需要保证this指向当前组件实例。如果方法是通过普通的函数定义,可能会导致this指向错误。为了确保this指向正确,可以使用箭头函数或者使用bind()方法来绑定this。例如: ```javascript methods: { updateProp: function(value) { this.$set(this.obj, 'prop', value) } } ``` 或者使用箭头函数: ```javascript methods: { updateProp: (value) => { this.$set(this.obj, 'prop', value) } } ``` 总结一下,要解决_this15.$set is not a function_的报错,需要确保使用的是Vue 2.x版本,并且调用this.$set函数时传入正确的参数,并且保证this指向正确。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值