teratail header banner
teratail header banner
質問するログイン新規登録
Vue.js

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

JavaScript

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

Q&A

解決済

1回答

4030閲覧

v-ifでmethodsを使用する際は「()」が必要??

ashikusahiroshi

総合スコア12

Vue.js

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

JavaScript

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

0グッド

0クリップ

投稿2022/01/12 08:47

0

0

起こっている現象

v-ifの使用時にmethodsを使用する時に引数がない場合でも「()」を使用しなければ、
methodの処理に関係なく、trueが返却されます。
当方は引数がない場合は()は不要(なくても動作する)と認識しております。
この原因をご存じの方がいらっしゃれば、ご教示お願いいたします。

コード

※必要最低限のコードしか記述しておりません

html

1<template> 2 <h1>testと表示させたくない</h1> 3 <!-- 下記divを表示させないようにしたいが、「()」を付けないと表示される --> 4 <div v-if="hoge"> 5 <p>test</p> 6 </div> 7</template> 8 9<script> 10export default { 11 methods: { 12 hoge() { 13 return false 14 } 15 } 16} 17</script>

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

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

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

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

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

guest

回答1

0

自己解決

原因

methodsを呼び出しているのではなく、methodsをそのまま渡していた。

詳細

v-ifに渡している値が下記のようにobjectを渡していることになり、
返り値のtrue, falseに関係なくtrue判定になっておりました。

v-if="hoge"の場合

javascript

1v-if="{ return false }"

()を付ける事で、methodsが呼び出され、返り値の判定が正常に動作いたします。

v-if="hoge()"の場合

javascript

1v-if="false"

投稿2022/02/03 00:53

ashikusahiroshi

総合スコア12

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.30%

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

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

質問する

関連した質問