上手くいかないです。
具体的にどの辺りが想定しない動作なのか詳しく記述してもらえますか？
- チェックボックスの状態と表示・非表示が上手く連動しない
- 入力した文字と表示される文字が違う
などが考えられますが
Like!
Vueで”パスワードを表示”を作りたいのですが上手くいかないです。
解決したいこと
メルカリのこのような機能を作ろうと思い自分で作ってみたのですが上手くいかないです。
どこか間違っていますか？
<input class="checkbox" type="checkbox" @click="changePasswordDisplay">
<span>パスワードを表示する</span>
<p v-if="isPasswordDisplay">{{user.password}}</p>
<br>
<button class="signupButton" @click="addUser">新規作成</button>
</form>
</div>
</template>
<script>
import axios from 'axios'
export default {
data(){
return{
isPasswordDisplay : false,
user : {
//error : [],
name : "",
email :"",
password : ""
}
}
},
methods:{
changePasswordDisplay(){
this.isPasswordDisplay =!this.isPasswordDisplay
}
//以下略
0
3Answer
0
Comments
@akihiro-inagaki
Questioner"パスワードを表示する"の下にパスワードを表示したいのですがcheckboxをオンにしてもパスワードが表示されないんです。- 細かいところはさておき、コード自体は「チェックボックスをクリックしたら真偽値 isPasswordDisplay が反転されて v-if の表示・非表示が切り替わる」という流れで書けていると思います。プロパティ・メソッド名を間違っているとかでもないので確かにざっと見た感じは "動きそうなのになぁ" という印象ですし、私の環境（Vue2, 3）で簡単に再現してみても動作しました。
・isPasswordDisplay はちゃんと true に変わっているか？
・changePasswordDisplay() は実行できているか？
・チェックボックスのクリックイベントは発火しているか？
・関係が無さそうな要素（button, formなど）を取り除いても動作しないか？
少なくともこの辺りは確認取れていますか？「クリックしたけど動かない」だけではなく、原因の切り分けのためにも少し掘り下げた調査が必要だと思います。
また使用している Vue のバージョンや導入しているプラグインが原因の可能性もあるので、他に情報があれば挙げて下さい。
clickイベントでもいいかもしれませんが、チェックのON/OFFで制御したいのであれば、
checkedとかで判定したほうが良いのではないでしょうか？
<input class="checkbox" type="checkbox" :clicked="isPasswordDisplay">
Like!
Comments
@akihiro-inagaki
Questionerありがとうございます
inputのtype属性を"password"から"text"に変更すれば思ってる動作になるんじゃないかと。
<input :type="isPasswordDisplay ? 'text' : 'password'" v-model="user.name">
Like!