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のネストされたトランザクションで発生する問題

推薦する

vue の v-bind を理解する

目次1. v-bindの主要ソースコードの分析1. v-bind属性はどこに均一に保存されるか: a...

CSS3 引用のソースと出典をマークする方法

疫病のせいで家にこもりきりで、頭がおかしくなりそうなので、パソコンを起動して頭を働かせてみました。今...

製品を選択した後、右下隅に√記号を表示するための純粋なCSS

おすすめの記事: CSS 疑似クラスの右下隅をクリックすると、選択を示すチェックマークが表示されます...

クリック範囲を拡大する入力チェックボックスを実装する方法

XML/HTML コードコンテンツをクリップボードにコピー< div style = &quo...

スライドボタン効果を実現するネイティブJS

Jsで作ったスライドボタンの具体的なコードは参考までに。具体的な内容は以下のとおりですまずエフェク...

TypeScriptのインデックスシグネチャの理解に関する簡単な説明

目次1. インデックス署名とは何ですか? 2. インデックス署名構文3. インデックス署名に関する注...

Linux で jar パッケージを起動してバックグラウンドで実行する方法

jar パッケージを実行する Linux コマンドは次のとおりです。方法1: java -jar s...

CentOS7でFTPサーバーを設定する方法

FTP は主にファイル転送に使用され、Linux では vsftpd で実装されるのが一般的です。F...

Celery と Docker を使用して Django で定期的なタスクを処理する方法

Django アプリケーションを構築して拡張していくと、必然的に特定のタスクをバックグラウンドで自動...

MySQLシリーズ15 MySQL共通設定とパフォーマンスストレステスト

1. 一般的なMySQLの設定以下のすべての構成パラメータは、32G のメモリを搭載したサーバーに基...

Angular の 12 の典型的な問題について簡単に説明します

目次1. Angular 2 アプリケーションのライフサイクル フックとは何ですか? 2. Angu...

jsを使ってシンプルなディスククロックを実現する

この記事では、参考までに、シンプルなディスククロックを実装するためのjsの具体的なコードを紹介します...

Web プロジェクトでの SQL インジェクションの防止

目次1. SQLインジェクションの概要2. SQLインジェクション攻撃の全体的な考え方SQLインジェ...

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

Ubuntu Server 16.04 MySQL 8.0 のインストールと設定のグラフィックチュー...