解决Vue异步请求中this为undefined以及mounted中获取不到data的数据的问题 起因 使用Nuxt做项目要实现视频点播功能,视频存在阿里云,整合了一个阿里云播放器,在created中使用封装的异步请求获取视频的vid和播放凭证,但是发现后端接口提示获取视频id失败。 <tem
平时也经常碰到Cannot read property 'name' of undefined之类的错误,但通常是某个变量未定义导致的。现在this都变成undefined了,确实有点诡异。我猜,你很可能是用错了箭头函数,像这样: 这个问题的根源,在于没搞清楚普通函数和箭头函数的区别。这里如果把箭头函数换成普通function,问题迎刃而解。 接下来我们将深入理...
但是由于使用new操作符时，JS特殊的处理，这个时候的vm的值是undefined，要想使用vm,只能用this来引用。
如果试图从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. 简而言之,尽量...
},methods: {arrowFunction:() =>{console.log(this.text);// ERROR! this is undefined} } 简而言之,尽量避免在Vue组件上使用箭头函数。这将会省去许多头痛和困惑的问题。 有时使用箭头函数是很好的,但这只在不引用this的情况下才有效。 computed: { ...
log(_this.index[0]); }); console.log("mounted"); } 不出意外的话,你会发现这两种情况依然会抛出undefined的错误。 但是这里与逻辑是相悖的,既然我选择在页面渲染之前获取到数据,为什么依然会报错? 猜测:网络问题 由于axios是异步的,也许在created时,真的执行了axios语句,但是由于网络问题,加载的时间大于...
myData: undefined }; }, created() { fetch('https://api.example.com/data') .then(response => response.json()) .then(data => { this.myData = data; }); } }; 解决方法:在模板中使用条件渲染(v-if)来确保数据已加载。 <template> ...
由于setup在,beforeCreate和created之前执行,所有this是undefined的,解决办法是 vue 中的 getCurrentInstance 方法返回了 ctx 和 proxy,控制台打印 ctx 和 proxy 发现和 vue2.x 中的 this 等同,习惯使用 this 的同学可以用 proxy 进行替代 let{proxy}=getCurrentInstance(); ...
之前的回答不对,这个时候Vue实例已经创建了,但是由于使用new操作符时,JS特殊的处理,这个时候的vm的值是undefined,要想使用vm,只能用this来引用。你可以用Object.getPropertyDescriptor()把window.vm的描述符打印出来就知道了 有用-1 回复 forGit: 我在created里打印window对象,window下的vm是存在的且不为undefined,...
data(){return{text:'This is a message',};},methods:{arrowFunction:()=>{console.log(this.text);// ERROR! this is undefined}} 简而言之,尽量避免在Vue组件上使用箭头函数。这将会省去许多头痛和困惑的问题。 有时使用箭头函数是很好的,但这只在不引用this的情况下才有效。