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

Question

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

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

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

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'forEach' of undefined"

这是我的组件：

<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" 的元素）。因此，即使组件已安装到 DOM，$refs 尚未设置。

我会为 "do some stuff with imgs" 创建一个方法，然后在异步调用的 then 处理程序中的 $nextTick callback 中调用该方法。传递给 $nextTick 的回调将是 "executed after the next DOM update cycle"，这意味着 $refs 将在此时设置。

<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>

Answer 2

如Vue实例的Lifecycle Diagram所示。在 Mounted Hook（这意味着我们可以访问 DOM）之后，还有 beforeUpdate 和 updated 钩子。这些钩子可以在数据更改时使用。我觉得 beforeUpdate 或者 update hook 可以在 created hook 获取数据后使用

<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
   });
 }
}

我希望这有帮助。

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

mounted method is fired before data loaded - VueJS

lifecycle

vue.js

vue-resource