vue $refs エラー報告の問題を解決する方法

Vue $refs エラーの解決策: 1. 対応するコード ファイルを開き、「this.$nextTick();」を追加します。 2. Mounted() フック関数で呼び出すだけです。

このチュートリアルの動作環境: Windows7 システム、vue バージョン 2.5.17、DELL G3 コンピューター。

[おすすめ関連記事: vue.js]

プロジェクト開発中に遭遇した問題は、未定義のプロパティ「style」を読み取れないことです。どのように解決したかについては多くは語りませんが、コードを投稿するだけです。

created() {
  this.getAddBG();
},
methods: {
  getAddBG() {
    let config = {
      service: "200017",
      h5Type: "activity"
    };
    this.$http.featchH5Post(config).then(res => {
      let list = res.data.data.advertiseList;
      list.forEach(item => {
        this.$refs[
          item.name
        ].style.backgroundImage = `url(${item.defaultPicture})`;
      });
    });
  }
}

解決策:

最初のメソッド: this.$nextTick() を追加します;

created() {
  this.$nextTick(() => {
    this.getAddBG();
  });
}

2 番目のメソッド: フックで呼び出されるマウントされた () 内関数。

mounted() {
  this.getAddBG();
}

理由の調査と分析:

1. vue のライフサイクルと Vue.nextTick() から始めましょう。

created() フック関数の実行時に DOM はレンダリングされず、現時点では DOM 操作を実行できません。

Vue ライフサイクルの created() フック関数で実行される DOM 操作は、Vue.nextTick() のコールバック関数に配置する必要があります。

mounted() フック関数を実行すると、DOM のマウントとレンダリングがすべて完了していますので、この時点ではフック関数内で DOM 操作を行っても問題ありません。

2. Vue公式ドキュメントの説明。

Vue は DOM 更新を非同期的に実行します。データ変更が観察される限り、Vue はキューを開き、同じイベント ループ内で発生するすべてのデータ変更をバッファーに入れます。同じウォッチャーが複数回トリガーされた場合、キューにプッシュされるのは 1 回だけです。バッファリング中のこの重複排除は、不必要な計算や DOM 操作を回避するために非常に重要です。次に、次のイベント ループ ティックで、Vue はキューをフラッシュし、実際の (重複排除された) 作業を実行します。 Vue は内部的に非同期キューにネイティブの Promise.then と MessageChannel を使用しようとしますが、実行環境がサポートしていない場合は、代わりに setTimeout(fn, 0) が使用されます。

Vue.nextTick() は、コードの実行を遅らせるために使用されます。

以上がvue $refs エラー報告の問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。