Vueのv-onパラメータの問題についてお話しましょう

Vueのv-onパラメータの問題についてお話しましょう

Vue での v-on:clock の使用

現在、vue.js フレームワークを学習しています。後で参照できるように、発生した問題をメモしておいてください。

まず、次のページをご覧ください (観察しやすいように、各ラベルは 1 つずつ色分けされています)。

HTML コードは次のとおりです。

<div class="groupbody">
   <ul class="リスト">
     <li v-for="todo.groupbody 内のセル " class="pagegroupcell " v-on:click="exchange($event)">
       <div class="pagecelltext">{{ cell.left }}</div>
       <div class="pagecellmin">{{ cell.min }}</div>
       <img src="img/images/direction/right.png" style="width: 20px;height: 30px;float: right;margin-top: 5px;">
       <div class="pagecellmsg">{{ cell.right }}</div> 
      </li>
    </ul>
    <div class="clear"></div>
</div>

js コードの箇所:

交換: 関数 (イベント) {
            alert("メソッドの実行を開始します");
            var a = イベント.ターゲット;
            var cellimg = a.getElementsByTagName("div")[0];
            var msg = cellimg.innerText; 
            page2datas.todos[0].groupheader = メッセージ;
            alert("メソッドが実行中です"); 
            var b = document.getElementById("page1");
            b.style.display = "なし";
            var c = document.getElementById("page2");
            c.style.display = "ブロック";
            alert("メソッドの実行が終了しました");
          }

このとき、セル内の色付きの領域をクリックすると(つまり、li タグのテキスト ラベルをクリックすると)、最初の alert() メソッドのみが実行され、次の 2 つのメソッドは実行されません。

その理由は、このメソッドのイベント パラメータにあります。

タグ バインディング メソッドにパラメーター $event がある場合は、event.target を使用して、現在のポイントのクリック イベントにバインドされているタグを取得できます。

ただし、このパラメータによって問題が発生する可能性もあります。たとえば、li タグのどの部分がクリックされたかに関係なく、クリック イベント メソッドを完全に実行したい場合、イベント パラメータは適用されません。現時点では、他の解決策しか考えられません。

解決:

li には v-for ループがあり、その中には li タグ内のデータを含むセル オブジェクトがあります。このオブジェクトをクリック イベント メソッドに渡すだけで、このオブジェクトを使用して目的を達成できます。

変更された HTML コード:

<div class="groupbody">
   <ul class="リスト">
     <li v-for="todo.groupbody 内のセル " class="pagegroupcell " v-on:click="exchange(cell)">
       <div class="pagecelltext">{{ cell.left }}</div>
       <div class="pagecellmin">{{ cell.min }}</div>
       <img src="img/images/direction/right.png" style="width: 20px;height: 30px;float: right;margin-top: 5px;">
       <div class="pagecellmsg">{{ cell.right }}</div> 
      </li>
    </ul>
    <div class="clear"></div>
</div>

変更された js コード:

 交換: 関数 (セル) {
        alert("メソッドの実行を開始します"); 
        page2datas.todos[0].groupheader =セル.left;
        alert("実行中");
        var b = document.getElementById("page1");
        b.style.display = "なし";
        var c = document.getElementById("page2");
        c.style.display = "ブロック";
        alert("メソッドの実行が終了しました");
      }

この時点で、電気ショックイベント実行メソッド全体を完全に実行でき、その後のページ切り替えも完了できます。

補足: Vue でクリック イベントを v-on にバインドする際のパラメータの問題

クリック イベントを v-on にバインドする場合のパラメータに関しては、次の 3 つのケースがあります。

バインドメソッドの後に括弧はありません

 <button @click="btnClick">クリック</button>
 <スクリプト>
 constアプリ = 新しいVue({
  方法:{
  btnClick(イベント){
  // この時点で、eventは現在クリックされているオブジェクトです console.log(event)
  }
  }
 })
 </スクリプト>

境界法の後に括弧が続く

<button @click="btnClick()">クリック</button>
<スクリプト>
 constアプリ = 新しいVue({
 方法:{
  btnClick(イベント){
  // この時点でイベントは未定義です
  console.log(イベント)
  }
 }
 })
</スクリプト>

バインドされたメソッドの後に括弧があり、パラメータを渡す必要がある

<button @click="btnClick(123)">クリック</button>
<スクリプト>
 constアプリ = 新しいVue({
 方法:{
  btnClick(イベント){
  // この時点でイベントは123です
  console.log(イベント)
  }
 }
 })
</スクリプト>

バインドされたメソッドの後に括弧があり、パラメーターと現在クリックされているオブジェクトを渡す必要があります。

<!-- この場合、現在クリックされているオブジェクトを渡す必要がある場合は、パラメータは $event にする必要があります -->
<!-- 最初の位置に数値を渡す場合は、引用符を追加する必要はありません。文字列を渡す場合は、引用符を追加する必要があります。引用符を追加しないと、Vue はそれを変数として解析します。データで定義されていない場合は、エラーが報告されます。 -->
<button @click="btnClick(123,$event)">クリック</button>
<スクリプト>
 constアプリ = 新しいVue({
 方法:{
  btnClick(数値,イベント){
  // この時点で、numは123、eventは現在クリックされているオブジェクトです。
  console.log(数値、イベント)
  }
 }
 })
</スクリプト>

上記は私の個人的な経験です。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。間違いや不備な点がありましたら、遠慮なくご指摘ください。

以下もご興味があるかもしれません:
  • vue v-on:click で動的パラメータを渡す手順
  • Vue における v-on イベント監視命令の基本的な使用方法の詳細な説明
  • Vue.js における v-on イベント命令の使用に関する簡単な説明

<<:  iptables および firewalld ツールを使用して Linux ファイアウォール接続ルールを管理する

>>:  MySQLのネストされたトランザクションで発生する問題

推薦する

メタビューポートタグ(モバイルブラウジングズームコントロール)の使用方法

OP が現在のファームウェアで Web ページを開くと、常に 50% にズームアウトされてから表示さ...

JavaScriptのプリミティブ値とラッパーオブジェクトの詳細な紹介

目次序文文章プリミティブ型プリミティブ値ラッパーオブジェクト物体コンストラクタ通常機能(関数)プリミ...

hrefを使用すると、リンクをクリックするだけでページ上の特定の場所にジャンプできます。

ページ内の a タグをクリックした後、ページ内の対応する場所にジャンプするようにします。方法は非常に...

Vue で axios を使用して画像をアップロードするときに発生する問題

目次FormDataとは何ですか? vueとaxiosの協力による実践的な体験追加()セット()消去...

メニューのホバー効果を実現するCSS3

結果: html <nav id="nav-1"> <a cl...

MySQL ログイン警告問題の解決策

1. はじめにMySQL にログインすると、次のような警告が表示されることがよくあります。警告: コ...

Vue はグラフィック検証コードログインを実装します

この記事では、グラフィック認証コードログインを実装するためのVueの具体的なコードを参考までに紹介し...

Javascriptでオブザーバーモードを実装する方法を教えます

目次オブザーバーパターンとは何ですか?シナリオシミュレーションコードの実装コードのリファクタリング要...

docker-swarm をベースにした継続的インテグレーション クラスタ サービスの構築の詳細な説明

序文この記事は私自身の製作過程の簡単な記録です。練習中に質問があれば、一緒に話し合うことができます。...

一般的な CSS プロパティのブラウザ互換性の概要 (推奨)

CSS プロパティのブラウザ互換性をまとめる必要があるのはなぜですか?使用する際は、Can I U...

パーティクルダイナミックボタン効果を実現するCSS

オリジナルリンクhttps://github.com/XboxYan/no…ボタンは、おそらく We...

MySQL Innodbの主な機能挿入バッファ

目次挿入バッファとは何ですか?挿入バッファのトリガー条件は何ですか?なぜ一意のインデックスにできない...

実用的なクイックスタートReactルーティング開発

インストールインストールするには、次のコマンドを入力します。 // ネプ npm で react-r...

JSアルバム画像の揺れと拡大表示効果のサンプルコード

前回の記事では、JS を使って簡単な揺れ効果を実現する方法を紹介しました。ご興味があればクリックして...

ドラッグ可能なログインボックスを実現するネイティブJS

この記事では、ネイティブ JS で実装されたドラッグ可能なログイン ボックスを紹介します。その効果は...