vue中的按钮和文本标签不可点击

Question

所以我在 vue 中创建了一个注册页面，当我想在框中输入内容或单击注册/登录按钮时，它不会做任何事情，但是如果我点击 TAB 并输入我的密码，然后点击 TAB 并按 ENTER 它会工作的。

这是代码：

<div class="login-box">
  <div v-if="pageMethod == 'login'">
    <h1 class="display-4">Authentication</h1>
    <p class="lead small">You are registered on this server. Insert your account's password to proceed with the authentication.</p>
  </div>
  <div v-if="pageMethod == 'register'">
    <h1 class="display-4">Registration</h1>
    <p class="lead small">You are not registered on this server. Insert your account's password to proceed with the reegistration.</p>
  </div>
  <div class="input-group">
    <input v-model="password" :type="showPassword == true ? 'text' : 'password'" class="form-control"
      placeholder="Password">
    <div @click="showPassword = !showPassword" class="input-group-prepend">
      <span class="input-group-text">
        <i :class="showPassword != true ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
      </span>
    </div>
  </div>
  <button v-if="pageMethod == 'login'" @click="sendAuth(true)" class="btn btn-primary mt-3">Login</button>
  <button v-if="pageMethod == 'register'" @click="sendAuth(false)" class="btn btn-primary mt-3">Register</button>
</div>

这是登录框 css 部分：

.login-box {
text-align: center;
z-index: 1;
height: 100%;
width: 400px;
position: absolute;
right: 0px;
top: 0px;
display: flex;
background-color: rgba($card-bg, 0.8);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px 15px;
h1 {
  font-family: 'HouseScript';
  font-size: 50px;
  line-height: 50px;
  color: #fff;
}

Answer 1

我修好了。有一个徽标悬停在文本标签和按钮上。我不得不添加指针事件：无；在标志的 css 部分。感谢您的建议。

Answer 2

你必须使用 tabIndex 并且还要听 Enter @keyup.enter ：

<input v-model="password" :type="showPassword == true ? 'text' : 'password'" class="form-control" placeholder="Password" tabindex="0">
...
<button v-if="pageMethod == 'login'" @click="sendAuth(true)" class="btn btn-primary mt-3" tabindex="1" @keyup.enter="sendAuth(true)">Login</button>
<button v-if="pageMethod == 'register'" @click="sendAuth(false)" class="btn btn-primary mt-3" tabindex="2" @keyup.enter="sendAuth(false)">Register</button>