代码之家 › 专栏 › 技术社区 › BrownBe

装载的方法在加载数据之前激发-VueJS

vue-resource lifecycle vue.js

11

BrownBe · 技术社区 · 7 年前

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

问题是,我试图访问 mounted 钩子,但数据未加载。

我在控制台中发现这个错误:

[Vue warn]:装入的挂钩中出错:“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 围绕内容 安装 ,一切正常。

所以,我不明白我怎么能在 安装 执行挂钩。这不是Vue生命周期挂钩的角色吗?

2 回复 | 直到 7 年前

1

11

thanksd thibaut noah 7 年前

自 this.imgs.query() 调用是异步的,您的 mounted 在调用 then 处理程序正在设置 this.imgs (我认为这是有约束力的 v-for 到模板中具有属性的元素 ref="image" ). 因此,即使该组件已装载到DOM,该 $refs 尚未设置。

我会创建一个方法来“使用IMG做一些事情”,然后在 $nextTick callback 在 然后 异步调用的处理程序。回调传递给 $nextTick 将“在下一个DOM更新周期后执行”,这意味着 $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>

2

bakhti_UZB 4 年前

如图所示 Lifecycle Diagram Vue实例的。挂载钩子后(这意味着我们可以访问DOM),还有 beforeUpdate 和 updated 挂钩。当数据更改时,可以使用这些挂钩。我想 更新前 或 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
   });
 }
}

我希望这有帮助。