vue.js及びFlaskの分岐処理

Question

Flask + SQLAlchemy（sqlite3） + Vue.jsでtwitterユーザーの検索ツールを作っています。
ブラウザ側で「キーワード」入力、「選択」をしクリックすることで該当があれば検索結果が表示されるという処理を行いたいです。

下記がhtmlとvuejsですが
入力されたキーワードに対して、
プロフィールに該当する検索結果を表示する処理をするか、
ツイートに該当する検索結果を表示する処理をするか、
という分岐になります。（vuejsはコードの記入が不明です。。。）

        <div>
            <h5>{{ alert }}</h5>
        </div>
        <div class="form-group">
            <label for="id">Search</label>
            <input type="text" class="form-control" id="find" v-model="find"　placeholder="キーワード検索">
        </div>
        <div class="form-group">
            <select v-model="selected">
                <option>プロフィール</option>
                <option>ツイート</option>
            </select>
        </div>
        <div class="form-group">
            <button class="btn btn-primary" v-on:click="action">Search</button>
        </div>

    methods: {
        action: function() {
            let formData = new FormData();
            formData.append("find", this.find);
            let self = this;
            $.ajax({
                type: 'POST',
                url: '/find',
                data: formData,
                processData: false,
                contentType: false,
                success: function(data) {
                    self.data = eval(data);
                    self.alert = '検索ワード：' + self.find
                },
                error: function(request, status, err) {
                    console.log(err);
                }
            });
        }
    }

上記を受けて、Flaskが検索ワードに加えて
「プロフィール」を選択された時は、プロフィールにキーワードが該当すればそれを返す、
「ツイート」を選択された時、ツイートにキーワードが該当すればそれを返す、
というそれぞれの分岐処理を行いたいです。
こちらも試行錯誤してみましたがどれもうまくいかず、一旦「検索キーワード」のみが渡されたコードになっています。ちなみに、データはSQLAlchemyでsqlite3を操作しています。sqlite3には、ID、ユーザー名、ツイート1件、プロフィールの4カラムがあります。

@app.route('/find', methods=['POST'])
def find():
    find = request.form.get('find')
    Session = sessionmaker(bind=engine)
    ses = Session()
    result = ses.query(Mydata).filter(Mydata.tweets.like('%{f}%'.format(f=find)))all()
    ses.close()
    return jsonify(getByList(result));

参考になる情報でも結構ですので、教えて頂けますと幸いです。

Comments

[t_obara]

分岐処理をしたいのであれば、selectタグの情報を入手して、その内容をみて判断する必要があります。その方法はご存知ですか？

[heroku]

情報入手の方法も分からない状態です、、、

[t_obara]

select cgiなどでググるとヒントが得られるかと思います。

[heroku]

ありがとうございます。これはvue側でselectの値を取得し、そのあとflaskへデータを送るというが妥当と想像しているのですが、それでもcgiになるのでしょうか？また、分岐処理はpython側で処理するのが通常でしょうか？

Answer 1

Flaskの質問でもVueの質問でもなく、jQueryの質問のように見えますが、以下の部分でfindしか渡していないので、selectの内容も渡してあげれば良いと思います。

    formData.append("find", this.find);
    formData.append("select", selectをここに指定する); //これはjqueryかな。vueでも良いです。

vue.js側のajaxのurlの指定は url_for() を使った方が良いと思います。

                url: '{{ url_for('find') }}',

ちなみにですが、jinja2とvue.jsで記法({{}})がかぶっていると思うのですが、変更しているのでしょうか？
変更しないと意図した動作にならない可能性があるので、そこも確認した方が良いと思います。

Comments

[heroku]

参考になりました！ありがとうございました！