vue 循环子组件调用接口更新 data 只有一个子组件更新?

怿祺
  • 324

在父级组件 parent 调用子组件 child,并循环数组 foo 向 child 传递数据对象 meta
在 child 组件内部的 created 方法通过接收到的 meta.imgId 去请求接口,获取图片并显示。
其中,请求的是封装了接口的 api。

但我遇到的问题是:每个 child 的图片都能请求成功(并打印结果),但是在 child 列表中只有最后一个组件的图片成功显示了,其他的图片地址仍为空,这是什么原因呢?

看着好像类似 for 循环的变量覆盖问题,但是每个组件不是独立的不会污染吗?

<!-- parent 组件 HTML 部分简化-->
<parent>
  <child v-for="item in foo" :meta="item"></child>
</parent>
<!-- child 组件 HTML 部分简化-->
<div class="child">
  <img :src="avatar">
</div>
// child 组件 js 部分简化
data () {
  return {
    avatar: ''
  };
},
props: {
  meta: Object
},
created () {
  api.getImgById(this.meta.imgId).then(res => {
    console.log('img url: ', res);  // 这里仅打印了一次
    this.avatar = res;
  });
}
回复
阅读 3.8k
6 个回答

如果你的每个请求都成功了,说明其实是每个子组件都是正常渲染的,那么问题可能出现在api.getImgById(this.meta.imgId).then的封装里,可能这里封装出了问题。

你可以通过下面的方式验证。

created () {
  // 在这里做个标记,然后运行看看会不会都输出结果
  console.log('xx');
  api.getImgById(this.meta.imgId).then(res => {
    console.log('img url: ', res);  // 这里仅打印了一次
    this.avatar = res;
  });
}

看不出有什么问题,但是 列表的话一般要加上 :key="index",

<parent>
  <child v-for="(item, index) in foo" :meta="item" :key="index"></child>
</parent>

我觉得是this的问题吧,你在外面用var that=this试下

created () {
  var _self = this;
  api.getImgById(this.meta.imgId).then(res => {
    console.log('img url: ', res);  // 这里仅打印了一次
    console.log(this);//打印下this 看看到底是啥
    _self.avatar = res;
  });
}

试下,因为你的this指向已经不是vue实例本身了,所以图片是不会显示的;
所以在vue的方法开头 推荐写一个 var _self = this;下面的代码用_self来代表vue实例,因为this在某些地方已经不是你要的this了

数组没有更新么?试试set

箭头函数里面this被强制更改了,请在外层用变量保存this指向vue实例

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏