🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

403閲覧

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

tomato01

総合スコア82

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/12/17 02:25

宜しくお願い致します。

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

流れ
1、入力フォームでappleを入力された場合、v-showの部分を表示させる
2、入力フォームで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という関数の中にクラスの処理も一緒に記載できるかどうか

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

javascript

1return isActive = true;

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

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

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

■if文の部分について

javascript

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

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

javascript

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

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

投稿2019/12/17 02:47

e-suzuno

総合スコア74

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tomato01

2019/12/17 04:20

ご回答を頂き誠にありがとうございます。 教えて頂いたコードでうまく動作することを確認致しました! この thisというのはfunction内からデータにアクセスする為に使用するものなのでしょうか。 下記の記事を読んだのですが、ちょっとまだ理解ができていない状態です。 https://qiita.com/takkyun/items/c6e2f2cf25327299cf03
e-suzuno

2019/12/17 04:49 編集

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
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問