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 を応援していただければ幸いです。間違いや不備な点がありましたら、遠慮なくご指摘ください。

以下もご興味があるかもしれません: