buttonクラスの1回目のクリックが効かない

Question

環境

Vue.js
Semantic UI

現状

<form class="sns_wrapper" v-on:submit.prevent="gSignIn">
  <button id="gSignInWrapper" type="submit">
    <span class="icon"></span>
    <span class="buttonText">Googleでログイン</span>
  </button>
</form>

上記のコードで下記の内容を表示しています.

ロード直後、ボタンを押すと(1回目)、何も効かないのですが、2回目以降は通常通り動作します.(メソッドが実行されます)

可能性のある原因を教えていただきたいです.

Answer 1

・ロードが遅い
・要素の上に別の要素（透明）が被っている
・別のスクリプトのイベントリスナー等が上書きされている
・発火条件を満たしていない

デモがあると検証しやすいです

デモページを作る際，個人的なおすすめはThimbleです

作ったコードを一般に公開できるだけでなく，
他の人も，自分が再編集（リミックス）したものを保存でき，便利です

Comments

[liveasnotes]

Thimbleは2019年12/16までに終了するようです．
デモページの作成には，jsFiddle，glitch等の代替手段があることをお伝えしておきます

[s8_chu]

CodePen はいいぞ！(ここぞとばかりに布教活動)