Question

我正在使用Vue Resource从REST API检索图像集合。请求在我的Vue组件的created挂钩中发送。

问题是，我正在尝试访问mounted挂钩中检索到的数据，但未加载数据。

我在控制台中收到此错误：

[Vue警告]：挂钩错误：“TypeError：无法读取属性'forEach'未定义”

这是我的组件：

<script>
export default {
  data() {
    return { imgs : '' };
  },
  created() {
    // the full url is declare in my main.js
    this.imgs = this.$resource('acf/v3/pages/4');

    this.imgs.query().then((response) => {
      console.log('success', response);
      this.imgs = response.data.acf.gallery;
    }, (response) => {
      console.log('erreur', response);
    });
  },
  mounted() {
    // get the ref="image" in my dom template
    let imgs = this.$refs.image;

    imgs.forEach((img) => {
      // I do some stuff with imgs
    });
  }
}
</script>

如果我将setTimeout包裹在mounted的内容周围，一切正常。

所以，我不明白如何在执行mounted挂钩之前等待我的数据加载。这不是Vue生命周期钩子的作用吗？

Answer 1

由于this.imgs.query()调用是异步的，因此在mounted处理程序设置then之前调用了this.imgs挂钩（我假设是绑定的）使用v-for将ref="image"添加到模板中具有属性$refs）的元素。因此，即使组件已安装到DOM，then尚未设置。

我会制定一个方法，以便用imgs＆＃34;做一些事情。然后在异步调用的$nextTick处理程序中的$nextTick callback中调用该方法。传递给$refs的回调将在下一个DOM更新周期＆＃34;之后执行，这意味着此时将设置<script> export default { data() { return { imgs: '' }; }, created() { // the full url is declare in my main.js this.imgs = this.$resource('acf/v3/pages/4'); this.imgs.query().then((response) => { console.log('success', response); this.imgs = response.data.acf.gallery; this.$nextTick(() => this.doStuffWithImgs()); }, (response) => { console.log('erreur', response); }); }, methods: { doStuffWithImgs() { // get the ref="image" in my dom template let imgs = this.$refs.image; imgs.forEach((img) => { // I do some stuff with imgs }); } } } </script>。

javac -cp '<location of jars>/*' MyRtmpClient.java

Answer 2

如Vue实例的Lifecycle Diagram中所示。在Mounted Hook（这意味着我们可以访问DOM）之后，还有beforeUpdate和更新的Hook。更改数据时可以使用这些挂钩。我认为在获取已创建的挂钩中的数据之后，可以使用beforeUpdate或update挂钩。

<script>
   export default {
      data() {
         return { imgs : '' };
       },
   created() {
    // the full url is declare in my main.js
    this.imgs = this.$resource('acf/v3/pages/4');

    this.imgs.query().then((response) => {
        console.log('success', response);
        this.imgs = response.data.acf.gallery;
       }, (response) => {
         console.log('erreur', response);
     });
   },
  // here we can use beforeUpdate or updated hook instead of mounted
  beforeUpdate() {
    // get the ref="image" in my dom template
    let imgs = this.$refs.image;

    imgs.forEach((img) => {
    // I do some stuff with imgs
   });
 }
}

我希望这有帮助。
我想提醒一下，我是VueJS的新手，现在正在学习）。

在加载数据之前触发挂载方法 - VueJS

2 个答案: