Vueが初めて要素を取得できなかったときの解決記録

Vueが初めて要素を取得できなかったときの解決記録

序文

Vue で要素を初回取得できない問題の解決方法は、ポップアップ ウィンドウで要素を取得するために、ポップアップ ボタンを初回クリックすることが多いかどうかです。要素を取得するためにポップアップ ウィンドウを開くと、ウィンドウは空なので、取得するにはもう一度開く必要があります。

1. DOMを更新した後に取得する

this.$nextTick(コールバック)
メソッド: {
    遊ぶ() {
        //要素を取得します console.log($('#video'));
        this.$nextTick(関数() {
            //要素を取得します console.log($('#video'));
        });
    }
}

2. タイマーを通過する

タイムアウトを設定します(fn, 0)
方法:{
    遊ぶ() {
        //要素を取得します console.log($('#video'));
        setTimeOut(関数(){
            //要素を取得します console.log($('#video'));
        }, 0);
    }
}

3. イベントをトリガーして取得する

@オープンしました
<el-dialog @opened="再生"></el-dialog>
 
メソッド: {
    遊ぶ() {
        //要素を取得します console.log($('#video'));
    }
}

要約する

これで、初めてvueが要素を取得できない問題を解決する方法についての記事は終わりです。vueが要素を取得できないことに関するより関連性の高いコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き閲覧してください。今後も123WORDPRESS.COMを応援してください。

以下もご興味があるかもしれません:
  • Vueクラス名で動的に生成された要素を取得する方法
  • Vue3 でカスタムフックを使用して DOM 要素を取得する際の問題の説明
  • VueはIDの動的な割り当てと、現在クリックされている要素のID操作を取得するクリックイベントを実装しています。
  • Vueは要素によって生成されたdata-v-xxx操作を取得します
  • vue.jsのクリックイベントは現在の要素オブジェクトの操作を取得します
  • Vueで指定された要素を取得する方法

<<:  RHEL8 /CentOS8 でマルチノード Elastic Stack クラスターを構築する方法

>>:  MySQL 8.0.13 のインストールと設定方法のグラフィックチュートリアル (Win10 の場合)

推薦する

JavaScript における一般的な配列操作

目次1. 連結() 2. 結合() 3. プッシュ() 5. シフト() 6. シフト解除() 7....

Vue2/vue3 ルーティング権限管理方法の例

1. Vueルーティングの権限制御には一般的に2つの方法がありますa. ルーティングメタ情報(メタ)...

jQueryでフルスクリーンスクロール効果を実現

この記事の例では、フルスクリーンスクロールを実現するためのjQueryの具体的なコードを参考までに共...

nginx は画像表示の遅さとダウンロードの不完全さの問題を解決します

前面に書かれた最近、ある読者から、ブラウザからサーバーにアクセスすると、画像の表示が遅く、ブラウザに...

MySQL 8.0.18 のインストールと設定のグラフィックチュートリアル

学習目標: Windowsシステムを使用してMySQLデータベースをインストールする方法を学びます。...

CentOS7.3 での MySQL 8.0.13 のインストールと設定のチュートリアル

1. 基本環境1. オペレーティングシステム: CentOS 7.3 2. MySQL: 8.0.1...

MySQLがブール型を返すいくつかの状況について簡単に説明します。

mysqlはブール型を返します最初のケースでは、直接戻ります select id='22a...

nginxで静的リソースを公開する方法

ステップ準備した静的リソースファイルを指定されたフォルダに配置しますnginx 設定ファイルを変更す...

ホームページのデザインはウェブデザイナーのレベルを最もよく反映する

私がこれまで携わってきた多くのプロジェクトでは、基本的に避けられない悪循環がありました。それは、ホー...

HTML テーブルの行間および列間の操作 (rowspan、colspan)

一般的に、<td> 要素の colspan 属性はセルの列間操作を実装するために使用され...

SEATAトランザクションサービスDockerのデプロイ手順の詳細説明

1. データベース認証ステートメントを作成する > データベース seata を作成します。 ...

Google ブラウザのラベルと入力間のスペースに関する小さな問題

最初にコード、次にテキストコードをコピーコードは次のとおりです。 <!DOCTYPE html...

Reactの状態管理の3つのルールのまとめ

目次序文No.1 焦点No.2 複雑な状態ロジックの抽出No.3 複数状態操作の抽出要約する序文Re...

Linux での MySQL のインストールに関するチュートリアル

目次1. 古いバージョンを削除する2. サーバーのカーネルタイプを確認し、適切なバージョンをダウンロ...

MySQL接続クエリにおけるととwhereの違いの簡単な分析

1. テーブルを作成する テーブル「学生」を作成( `id` int(11) NULLではない、 `...