解决Vue异步请求中this为undefined以及mounted中获取不到data的数据的问题 起因 使用Nuxt做项目要实现视频点播功能,视频存在阿里云,整合了一个阿里云播放器,在created中使用封装的异步请求获取视频的vid和播放凭证,但是发现后端接口提示获取视频id失败。 <tem
平时也经常碰到Cannot read property 'name' of undefined之类的错误,但通常是某个变量未定义导致的。现在this都变成undefined了,确实有点诡异。我猜,你很可能是用错了箭头函数,像这样: 这个问题的根源,在于没搞清楚普通函数和箭头函数的区别。这里如果把箭头函数换成普通function,问题迎刃而解。 接下来我们将深入理...
如果试图从Vue组件上的箭头函数内部访问 this,将得到一个错误,因为 this 不存在 data() { return { text: 'This is a message', }; }, methods: { arrowFunction: () => { console.log(this.text); // ERROR! this is undefined } } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 简而言之,尽量...
当我们在常规函数或简写函数中使用箭头函数时,常规函数将this设置为我们的Vue组件,而箭头函数则不一样。 来个例子: data() {return{match:'This is a message', }; },computed: {filteredMessages(messages) {console.log(this);// VueconstfilteredMessages = messages.filter(// 引用我们的Vue组件(message) ...
但是由于使用new操作符时，JS特殊的处理，这个时候的vm的值是undefined，要想使用vm,只能用this来引用。
log(_this.index[0]); }); console.log("mounted"); } 不出意外的话,你会发现这两种情况依然会抛出undefined的错误。 但是这里与逻辑是相悖的,既然我选择在页面渲染之前获取到数据,为什么依然会报错? 猜测:网络问题 由于axios是异步的,也许在created时,真的执行了axios语句,但是由于网络问题,加载的时间大于...
console.log(this.text);// ERROR! this is undefined} } 简而言之,尽量避免在Vue组件上使用箭头函数。这将会省去许多头痛和困惑的问题。 有时使用箭头函数是很好的,但这只在不引用this的情况下才有效。 computed: { location:()=>window.location, ...
data(){return{text:'This is a message',};},methods:{arrowFunction:()=>{console.log(this.text);// ERROR! this is undefined}} 简而言之,尽量避免在Vue组件上使用箭头函数。这将会省去许多头痛和困惑的问题。 有时使用箭头函数是很好的,但这只在不引用this的情况下才有效。
由于setup在,beforeCreate和created之前执行,所有this是undefined的,解决办法是 vue 中的 getCurrentInstance 方法返回了 ctx 和 proxy,控制台打印 ctx 和 proxy 发现和 vue2.x 中的 this 等同,习惯使用 this 的同学可以用 proxy 进行替代 let{proxy}=getCurrentInstance(); ...
我有两个子父组件,父组件在create中进行异步请求获取的list,使用prop传递给子组件渲染数据,但到了子组件,这个list就是undefined了;如果这个list在父组件的data中初始化为空数组,到了子组件这个list就是空数组;也就是在create中对list赋值无效。 使用webpack部署,修改文件热加载后是可以正常显示的,但是,刷新后却不...