ホームページ > ウェブフロントエンド > Vue.js > vue $refs エラー報告の問題を解決する方法

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

藏色散人
リリース: 2023-01-13 00:45:05
オリジナル
4583 人が閲覧しました

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

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

このチュートリアルの動作環境: 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 サイトの他の関連記事を参照してください。

関連ラベル:
vue
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート