[Python * Vue] Python(Flask) で判定した bool を Vue に渡して v-show で表示・非表示を切り替える方法が分からない
- 評価
- クリップ 0
- VIEW 319
前提・実現したいこと
- Python(Flask) 側で True/False 判定をして、Vue にその結果を渡して、表示・非表示を切り替えたい
現在のやり方
- Python(Flask) 側で View Model に判定結果を json 化したものを定義
- Vue 側にデータを渡す
- v-show の条件次第で切り替え
発生している問題・エラーメッセージ
[Vue warn]: Missing required prop[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "isGuest"該当のソースコード
@property
def isGuestJson(self) -> str:
if g.spaUser.isMember:
return json.dumps(False)
return json.dumps(True) <global-menu
ref="child"
:user-name="'{{ vm.userName }}'"
:member-rank="'{{ vm.memberRankName }}'"
:links="{{ vm.linksJson }}"
:isGuest="{{ vm.isGuestJson }}">
</global-menu>v-show="isGuest = 'true'" props: {
userName: {
type: String,
required: false,
},
memberRank: {
type: String,
required: false,
},
links: {
type: Object,
required: true,
},
isGuest: {
type: Object,
required: true,
}
}class BaseViewModel(object):
@property
def isGuestJson(self) -> str:
if g.user.isMember:
return json.dumps(False)
return json.dumps(True)-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
まだ回答がついていません
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.33%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正の依頼
FiroProchainezo
2020/02/06 14:18
isGuestJsonをVue側に渡しているコードを提示いただけますか？
(VueはどうやってisGuestJsonを取得していますか？)
spellbound
2020/02/06 15:13
コメントありがとうございます！ 追記しました！
FiroProchainezo
2020/02/06 19:30
あれ、render_templateの時に渡したり、ajax(axiosかな？)で取得していたりするわけじゃないんですかね？？
vueとflaskを使って最低限動作させる(v-showを動かせる)コードを提示いただくことは可能ですか？
flask側に
@app.route('/')
とかも含まれているものをお願いします。
また、vueとflask(jinja2)で使う記法({{}})がかぶっていますが、そこはどうやって変更していますか？