v-onの処理時にクラスの付与がうまくいかない

Question

宜しくお願い致します。

v-on時に簡易パスワード認証の機能をつけました。（動作確認済み）
簡易パスワード認証が成功した後、psBoxというクラスに追加でクラスを付与させたいと考えてますがうまくいきません。

流れ
１、入力フォームでappleを入力された場合、v-showの部分を表示させる
２、入力フォームでappleを入力された際、クラスactivesをfalseからtrueにしてactivesのクラスを適用する（display:noneを適用させたい）

<div id="app">

<div class="psBox" v-bind:class="{ actives: isActive }">
	<p>パスワードを入力してください</p>
  <input type="text" v-model="msg" @input="checkPass">

</div>

<div v-show="show">
  <p>簡易認証後に表示される部分<p>
</div>

<script>
var vm = new Vue({
  el: "#app",
  data: {
    msg: "",
    show: false,
	isActive: false
  },
  methods: {
    checkPass: function() {
      this.show = this.msg === "apple";
	  if (this.show = this.msg === "apple") {
		 return isActive = true;
	  }
    }
  }
});

</script>

<style>
.actives {
 display: none;
}
</style>

わからないこと
・クラス付与の処理でif文を使っていますが正しい記載方法がわかりません。
・このようなケースの場合、checkPassという関数の中にクラスの処理も一緒に記載できるかどうか

Answer 1

■クラスの付与がうまくいかない件について

return isActive = true;

checkPassメソッドに記述されています、上記の記述部分につきまして
isActiveにtrueを入れておりますが
このisActiveはdataで宣言したisActiveではありません。

直近のプログラムでthis.showと記述してるようにthis.isActiveにしてあげた方が良いでしょう

そうすればactivesが有効になると思います。

■if文の部分について

      this.show = this.msg === "apple";
      if (this.show = this.msg === "apple") {

上記のif文の記述についてですが
this.showに２回も代入しており。
おそらく、if文で判断したいのはthis.showがtrueかどうかだと思いますので

      this.show = this.msg === "apple";
      if (this.show) {

上記のように変更するとよいと思います。

Comments

[tomato01]

ご回答を頂き誠にありがとうございます。

教えて頂いたコードでうまく動作することを確認致しました！

この　thisというのはfunction内からデータにアクセスする為に使用するものなのでしょうか。
下記の記事を読んだのですが、ちょっとまだ理解ができていない状態です。

https://qiita.com/takkyun/items/c6e2f2cf25327299cf03

[e-suzuno]

this につきましてはなかなか厄介なもので、
あくまで今回のケースだけの話となりますが

試しにcheckPassメソッドの中に console.log(this); を入れてみて動作させてみてください。
ブラウザの開発者ツールで確認すると下記のように返ってくるでしょう

Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}

これはcheckPassメソッドが、自分自身を所持しているVueインスタンスを返しています。

checkPassメソッド内においては、thisは現在のVueインスタンスと同じ扱いであり
this.isActiveと記述することで、
現在のVueインスタンスのisActiveをプロパティを見に行くことが出来るようになります。

※参考にですがここのURL等も読むとよいかもしれません
https://v1-jp.vuejs.org/guide/instance.html