经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue 中使用 this 更新数据的一次大坑
来源:cnblogs  作者:luis林威  时间:2022/11/23 20:07:06  对本文有异议

情景说明:

之前用 vue 做数据绑定更新时,发现一个莫名奇妙的问题。

我在 vue 实例中声明了一个数组属性如 books: [],在异步请求的回调函数中使用 this.books = res.data.data; 进行数据更新,更新步骤后面紧跟着打印了 console.log(this.books),打印数据显示确实更新成功!但页面数据渲染无论是 {{books.length}} 还是 {{books}} 都显示没有数据!!!

这就脑瓜子疼了,花了老长时间反复证明了:this.books 数据肯定更新上去了,但它喵的 {{books}} 就是不显示!

敲重点:我是在 axios 的回调函数中使用的 this 更新数据!

最后想起了一个小细节,axios 异步通信的回调函数我用的是函数表达式 axios({xxx}).then(function(res){xxx}),格式示例如下:

  1. axios({
  2. url: url,
  3. method: "get",
  4. headers: {
  5. token: token
  6. }, //自定义请求头数据传递token
  7. params: {
  8. userId: userId
  9. }
  10. }).then(function(res) {
  11. //上面的回调函数用的标准格式
  12. }
  13. });

使用这种格式的回调函数写法,如果在回调函数中,使用 this,那么,这个 this 就不是 vm(ViewModel) 对象了,而是回调函数自身这个对象!!!

所以,使用这种回调函数写法,在回调函数中,就不能使用类似 this.books 进行数据更新!只能使用 vm.books(vm 指的是创建 vue 实例对象时的引用或对象属性名称)来进行对 vue 对象数据的更新。

如果想使用 this 来实现数据更新,那就必须使用回调函数的简写格式:axios({xxx}).then((res)=>{xxx}),格式示例如下:

  1. axios({
  2. url: url,
  3. method: "get",
  4. headers: {
  5. token: token
  6. }, //自定义请求头数据传递token
  7. params: {
  8. userId: userId
  9. }
  10. }).then((res)=>{
  11. //上面的回调函数用的简写格式
  12. }
  13. });

使用这种简写格式的回调函数写法,就可以直接在回调函数中使用 this,此时,这个 this 也是 vm(ViewModel) 对象!!!

PS:好吧,这细节也是没谁了,也怪我自己突然没注意到,使用了标准格式的回调函数写法~

但是,话说 ,为什么它喵的,使用标准格式写法,this 指的不是 vue 实例对象,但是用它更新的数据如 this.books 也给更新上去了,打印出来也真的是一点毛病没有???

原文链接:https://www.cnblogs.com/luisblog/p/16919628.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号