web-dev-qa-db-ja.com

データが読み込まれる前にマウントされたメソッドが起動されます-VueJS

REST APIから画像コレクションを取得するために Vue Resource を使用しています。リクエストは、私のVueコンポーネントのcreatedフックで送信されます。

問題は、取得したデータに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のコンテンツをmountedで囲むと、すべてが正常に機能します。

そのため、mountedフックが実行される前にデータが読み込まれるのを待つ方法がわかりません。これはVueライフサイクルフックの役割ではありませんか？

vue.jslifecyclevue-resource
9
BrownBe

this.imgs.query()呼び出しは非同期であるため、mountedハンドラーがthis.imgsを設定する前にthenフックが呼び出されています（これはv-forをテンプレートの属性にref="image"で追加します。そのため、コンポーネントがDOMにマウントされていても、$refsはまだセットアップされていません。

「imgsで何かを行う」メソッドを作成し、非同期呼び出しのthenハンドラーの $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>
4
thanksd

ライフサイクル図 of Vue instance。Mounted Hook（つまり、DOMにアクセスできることを意味します）の後に、beforeUpdateフックと更新フックがあります。これらのフックはデータが変更されたときに使用されるbeforeCreateまたは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と最近学習していることを思い出します）。

1
bakhti_uzb