vue.js elementui 複数フォームを使う

vue.jsで 1ページで複数のフォームを for 文などで繰り返し使う。

考え方としては
親vue から子vueをfor文で読み出す。
その際に 変数 id や title などを渡す。

ってな感じでしょうか。

まずは親vueからコンポーネントを読み出しましょう

Yumeanswershow.vue

<div v-for="(v,key) in list" style="display: block;margin-top: 15px;">
    {{v.id}} : {{v.title}}
    <yumeansweradd-component :id="v.id" :title="v.title"></yumeansweradd-component>
</div>


//略
export default {

components: {// 非同期で読み込み
    'yumeansweradd-component': () => import('./YumeansweraddComponent.vue')
},

今度は 子 vue

YumeansweraddComponent.vue

<template>

    <div>

        <el-form :model="form" :rules="rules" ref="form">
            <el-form-item :label="id + title" prop="message">
                <el-input type="textarea" v-model="form.message" :rows=5></el-input>
            </el-form-item>
            <el-form-item>
                <div class="t-c">
                    <el-button type="primary" @click="submitForm('form')">登録</el-button>
                </div>
            </el-form-item>
        </el-form>

    </div>


</template>

<script>

    import axios from 'axios'


    export default {
        props: ['id','title'],//親要素から id を取得
        data() {
            return {
                form: {
                    message:'',
                },
                rules: {
                    message: [
                        { required: true, message: '入力してください', trigger: 'change' }
                    ],
                },

            };

        },

        created () {
            // console.log("idは" + this.id);
        },

        methods: {

            submitForm(formName) {

                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log("送信しました");
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

            },


        }


    }

</script>

以上。