[Vue.js]パスワードの表示・非表示を切り替えるinput

備忘録

---

デモ

コード(JSFiddle)

解説

input内のアイコンに、
dataプロパティのフラグを切り替えるイベントを設定する。

<span :class="iconType" @click="onClick"></span>

methods: {
  onClick: function() {
    this.isChecked = !this.isChecked;
  }
}

inputのtypeを算出プロパティで切り替える。

 <input :type="inputType" id="password" class="input">

  computed: {
    inputType: function () {
      return this.isChecked ? "text" : "password";
    },
  }

もっとよいやり方をご存じの方がいたら教えてください。