BottleとVue.jsを組合わせて使おうと思うのですが、うまくいきません。そもそも考え方が間違っているのでしょうか？

前提・実現したいこと

PythonのBottleとVue.jsを組合せて、Webアプリケーションを作ろうとしています。
（コロナ自粛を機に勉強を始めた超初心者です．．．）

以下を実現したいのですが、どうにもうまく行きません。
①Bottleのテンプレート（ラジオボタン）に入力したデータを元に計算して、
その結果をテンプレート側に表示する。
②入力時には計算結果欄を表示せず、送信ボタンをクリックしたら欄を表示する。

発生している問題・エラーメッセージ

上記の②を実現しようと、「v-show」「v-if」などを試していますが、
送信ボタンをクリックすると、ほんの一瞬だけ結果が表示されてすぐに消えてしまいます。
「v-show」を削除すると計算結果を表示することは出来ますが、
空欄の計算結果欄を出したくないのです．．．

該当のソースコード

python
1from bottle import route, run, template, request
2
3@route('/test')
4def test():
5    return template('template', additon = '', multiplication= '' )
6
7@route('/test', method='POST')
8def test():
9    data1 = int(request.forms.data1_str)
10    data2 = int(request.forms.data2_str)
11    return template('template', additon = data1 + data2, multiplication= data1 * data2 )
12
13run(host='localhost', port=8080, reloader=True, debug=True)

tpl
1<body>
2<div id="app">
3    <form method="post" action="/test" @submit="onSubmit">
4        <p>
5        データ1：
6        <label><input type="radio" name="data1_str" value="1" required>1</label>
7        <label><input type="radio" name="data1_str" value="2">2</label>
8        <label><input type="radio" name="data1_str" value="3">3</label>
9        </br>
10        データ2：
11        <label><input type="radio" name="data2_str" value="1" required>1</label>
12        <label><input type="radio" name="data2_str" value="2">2</label>
13        <label><input type="radio" name="data2_str" value="3">3</label>
14        </p>
15        <input type="submit" value="送信する">
16    </form>
17
18    <div v-show="show">
19        <p>
20        ------- 計算結果の表示 -------</br>
21        </p>
22        データ１とデータ２を．．．</br>
23        　足すと　：{{additon}}</br>
24        　かけると：{{multiplication}}</br>
25        </p>
26    </div>
27</div>
28
29<script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
30<script>
31    new Vue({
32        el: '#app',
33        data: {show: false},
34        methods: {onSubmit: function () { this.show = true }},
35    });
36</script>
37
38</body>
39</html>

試したこと

「v-show」を削除すると計算結果を表示することは出来ます。
その場合の計算結果はあっているので、データの受け渡し時に何か問題が発生しているんだろうな．．．と思っています。

そもそも、Bottleをこのように使うのが誤りなのかもしれず、その場合には申し訳ありません。
初歩的な質問ですみませんが、何卒よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

本来的には、Vue.js側はブラウザ側の表示担当、python(bottle)側はバックエンドでデータ通信担当と役割を分ける方が双方の存在意義の理にかなっていると考えますし、もし拡張して一つのアプリを作っていくならaxios等でbottle側とjsonデータを非同期通信でやり取りする・・・なんて形を推奨します。

まあ、それは将来的な話で。

今回、送信ボタンを押したらすぐ表示が消えてしまう原因は、vueのdataプロパティでshow:falseが固定で記載されているからです。
onSubmitで送信ボタンが押されたらshow:trueになって非表示部分が見えますが、postしたリクエストのレスポンスが返ってきたら再び非表示になります。

簡単な解決策は、showの内容をbottleのtemplateで指示してしまうことです。
ちょうど初期表示と送信ボタン押下後でメソッドが分かれていますし。
vue側のshowに設定する値をpythonのコード側から設定しましょう。

python
1# bottle側
2@route('/test')
3def test():
4    return template('template', additon = '', multiplication= '' ,show='false') # showはfalseにする
5
6def test():
7    data1 = int(request.forms.data1_str)
8    data2 = int(request.forms.data2_str)
9    return template('template', additon = data1 + data2, multiplication= data1 * data2 ,show='true' ) # showはtrueにする
10

javascript
1// dataプロパティのshowの値をpython側からバインドする
2        data: {show: {{show}}},

投稿2020/06/12 13:52

hope_mucci

総合スコア4447

merry4649

2020/06/13 01:14

ありがとうございます！！教えていただいた通り試したところ、無事思った通りに動きました！レスポンスの仕組みもよく分かったので、大変ありがたいです。非同期通信については、確かにやってみたいなと思っていたので、引き続き勉強を続けたいと思います。本当にありがとうございました！！！！！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！