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 を応援していただければ幸いです。間違いや不備な点がありましたら、遠慮なくご指摘ください。 以下もご興味があるかもしれません:
|
<<: iptables および firewalld ツールを使用して Linux ファイアウォール接続ルールを管理する
>>: MySQLのネストされたトランザクションで発生する問題
目次1. v-bindの主要ソースコードの分析1. v-bind属性はどこに均一に保存されるか: a...
疫病のせいで家にこもりきりで、頭がおかしくなりそうなので、パソコンを起動して頭を働かせてみました。今...
<br />オリジナルURL: http://www.lxdong.com/post/m...
おすすめの記事: CSS 疑似クラスの右下隅をクリックすると、選択を示すチェックマークが表示されます...
XML/HTML コードコンテンツをクリップボードにコピー< div style = &quo...
Jsで作ったスライドボタンの具体的なコードは参考までに。具体的な内容は以下のとおりですまずエフェク...
目次1. インデックス署名とは何ですか? 2. インデックス署名構文3. インデックス署名に関する注...
jar パッケージを実行する Linux コマンドは次のとおりです。方法1: java -jar s...
FTP は主にファイル転送に使用され、Linux では vsftpd で実装されるのが一般的です。F...
Django アプリケーションを構築して拡張していくと、必然的に特定のタスクをバックグラウンドで自動...
1. 一般的なMySQLの設定以下のすべての構成パラメータは、32G のメモリを搭載したサーバーに基...
目次1. Angular 2 アプリケーションのライフサイクル フックとは何ですか? 2. Angu...
この記事では、参考までに、シンプルなディスククロックを実装するためのjsの具体的なコードを紹介します...
目次1. SQLインジェクションの概要2. SQLインジェクション攻撃の全体的な考え方SQLインジェ...
Ubuntu Server 16.04 MySQL 8.0 のインストールと設定のグラフィックチュー...