3つのFORMをJS→VUE.JSに書き換えたい

Question

#更新しました

VUE側を書きました。

• HTMLのファイルフォームからPOSTして、FlaskFormで処理したい
• JS側のPOSTには、AJAX使いたくない（可読性がない）
• 将来的にも、FLASK側はライブラリで処理したい

POSTの中身をみても、data:Noneで受け取れていない

VUE側でのバインディングが良く分からない

(Pdb) vars(number_form.file)
{'meta': <wtforms.form.Meta object at 0x000001EA7762A0D0>, 'default': None, 'description': '', 'render_kw': None, 'filters': (), 'flags': <wtforms.fields.Flags: {}>, 'name': 'file', 'short_name': 'file', 'type': 'FileField', 'validators': (), 'id': 'file', 'label': Label('file', 'File'), 'process_errors': [], 'object_data': None, 'data': None, 'raw_data': []}

#内容
フォームで３つのファイルをPOST送信するコードを書いています。
バックエンドはFlaskで書いています。

#質問
単純に同じフォームが３つあるため、Vue.Jsでコンポーネントに書き換えたいと思います。
バリデーションは無しで、同じ機能を実装するにあたり、どこから手を付けていっていいのか
良くわかっていません。

　特にFLASK側には、form1,form2,form3というふうに、BE側で違う分岐になるように
処理を書いていますが、そもそもコンポーネントを共有化するのであれば
BE側もClassを継承するような処理をして、すっきりした方が良いのかもしれません。

　いまだVue.Js、PYTHONも十分理解できていないのですが、
やり方さえわかれば、今後の応用が出来る気がします。

　こういう同じフォームを使いまわす際の、
Vue.JsとPYTHONの書き方のお作法がありましたら、教えて頂きたく思います。
（他力本願で申し訳ありませんが、何回もチャレンジはしましたが、
いまだ乗り越えられない状態です。）

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>

<!-- vue.js form -->
<div id="app">
<div id="content">
    <div class="container-fluid">
        <template 
            title="ファイル１の読込" 
            form = {{form1}}　　　　　<!--　Flask側から　form1　をレンダリング　-->
        >
        </template>
        <template
            title="ファイル２の読込" 
            form = {{form2}}　　　　　<!--　Flask側から　form2　をレンダリング　-->
        >
        </template>
        <template 
            title="ファイル３の読込" 　　<!--　Flask側から　form3　をレンダリング　-->
            form = {{form3}}
        >
        </template>
    </div>
</div>
</div>

{% raw %}
<script type="text/x-template" id="template">
        <h1>{{title}}</h1>
            <form class="form form-horizontal" method="POST" action="{{url_for('data_import')}}"  enctype="multipart/form-data">
                <input type="file" name="filename">
                {{ this.form.hidden_tag }}
                <input type="submit" >
            </form>
        <hr>
</script>
{% endraw %}

<script>

Vue.component('template', {
    template: '#template',
    props: {
            title : String,
            form : Object,
            },
    data:   function(){
        return {
        title : "",
        hidden_tag:""
        };
    }
  }
)
  
  // Vue
new Vue({ 
    el: '#app'
});

</script>

from flask_wtf import FlaskForm

class UploadForm(FlaskForm):
    file = FileField()

#データインポート処理
@app.route('/import',methods=["GET", "POST"])
def data_import():
    number_form = UploadForm()
    label_form = UploadForm()
    xxx_form = UploadForm()

    if request.method == "POST":
        if number_form.validate_on_submit():
            filename = secure_filename(number_form.file.data.filename)
            number_form.file.data.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
        elif label_form.validate_on_submit():
            filename = secure_filename(label_form.file.data.filename)
            label_form.file.data.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
        elif xxx_form.validate_on_submit():
            filename = secure_filename(label_form.file.data.filename)
            xxx_form.file.data.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))

        return redirect(url_for('data_import'))

    return render_template( 
        'import.html',form1=number_form,form2=label_form,form3=xxx_form)

Answer 1

最終的にはVue.Jsは使わないことにしました。

#解決した方法
HTMLフォームとFLASKのFORM-MODEL処理について、下記の辞書を使い紐付けを行った。

JS
dict = { "title1:"db1","title2":"db2", "title3":"db3","title4":"db4" }

python
model_table = {"db1",database1,"db2":database2,"db3":database3,"db4":database4}

全体的なループカウンタは、Flask側からJINJA2でループを回して、レンダリング時にloop.index0を使いIDタグに命名している。
DOM完成後にJSでdictのループを回して（MAPのINDEXから生成）してhtmlを書き換えている。

          {% for i in forms %}
          <h1 id = "t{{loop.index0}}"></h1>
          <p>
              <form id = "f{{loop.index0}}" class="form form-horizontal" method="POST" action="{{url_for('data_import')}}"  enctype="multipart/form-data">
                  <input type="file" name="file">
                  <input type="submit" >
              </form>
          </p>
          {% endfor %}

<script>
var dict =  { "title1:"db1","title2":"db2", "title3":"db3","title4":"db4" }

    Object.keys(dict).map(function(key,index){
        document.getElementById('t'+index).textContent = key;
        document.getElementById('f'+index).action += "/"+dict[key];
    });
</script>

model_table = {"db1",database1,"db2":database2,"db3":database3,"db4":database4}

#データインポート処理
@app.route('/import')
@app.route('/import/<model_name>',methods=["GET", "POST"])
def data_import(model_name):
    if request.method == 'POST': 
        if 'file' not in request.files:
            flash('No file part')
            return redirect(request.url)
        file = request.files['file']
        if file.filename == '':
            flash(name + "ファイルを選択してください。", "failed")
            return redirect(request.url)
        if file and allowed_file(file.filename): 
            filename = secure_filename(file.filename)
            filename =os.path.join(app.config['UPLOAD_FOLDER'], filename)
            file.save(filename)
            model = model_table[model_name]
            objects = model.data_import(filename)

                #new_report = Report(report_name=filename, report_welder_wps_association_id=report_id) #create a database entry with exact filename
                #db.session.add(new_report)
                #db.session.commit()

        return render_template(
            'table_viewer.html',
            forms = range(4)
        )

    return render_template( 
        'import.html',
        forms = [1,2,3,4]
    )

#あとがき
何故ここまで複雑化したのかというと、FLASK側の処理をURLエンドポイントで分岐したいことと、
JS側をコード変更が容易になるようにしたいため。

FLASK側で試行錯誤したが、やはりVIEWに関わる情報は、JS側で処理をしたいというのが根本にある。