使用ElementUI报错 Expected Object, got String

Question

1.正在学习vue2遇见一个问题 执行过程是在Table中选择一列点击编辑然后弹出模态框，把该列内容放进模态框中，但是报错：[Vue warn]: Invalid prop: type check failed for prop "model". Expected Object, got String.请大家帮忙看看
DBTable.vue

<template>
<!--...... -->
<!--...... -->
   <el-table-column label="Operation" 
                    width="120">
           <template scope="scope">
              <el-button @click="editItem(scope.$index, tableData)" type="text" size="large">编辑</el-button>
           </template>
   </el-table-column>
<!--...... -->
<!--DBTable.vue 下最后引用模态框这个组件 -->
    <db-modal :dialogFormVisible="dialogFormVisible" :form="form" v-on:canclemodal="dialogVisible">
    </db-modal>
</template>

<script>
export default {
        data(){
            return {
                tableData: [],
                apiUrl: 'http://127.0.0.1:8081/api/persons',
                sex: '',
                email: '', 
                dialogFormVisible: false,
                form: '',
            }
        },
        components: {
            DbModal
        },
</script>

然后点击编辑

            editItem: function (index, rows) {
                this.dialogFormVisible = true;
                const itemId = rows[index].id;
                const idurl = 'http://127.0.0.1:8081/api/persons/detail/' + itemId;
                this.$axios.get(idurl).then((response) => {
                    this.form = response.data.extend.person; //返回的数据给form
                    console.log(typeof this.form);
                }).catch(function (response) {
                    console.log(response)
                });
            },

附加上DBModal.vue 代码

<template>
    <el-dialog title="Edit" v-model="dialogFormVisible" :close-on-click-modal="false" :show-close="false">
        <el-form :model="form">
            <el-form-item label="item_id" :label-width="formLabelWidth">
                <el-input :disabled="true" v-model="form.id" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="username" :label-width="formLabelWidth">
                <el-input :disabled="true" v-model="form.username" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="email" :label-width="formLabelWidth">
                <el-input :disabled="true" v-model="form.email" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="phone" :label-width="formLabelWidth">
                <el-input v-model="form.phone" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="sex" :label-width="formLabelWidth">
                <el-input :disabled="true" v-model="form.sex" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="zone" :label-width="formLabelWidth">
                <el-input v-model="form.zone" auto-complete="off"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button :plain="true" type="danger" v-on:click="canclemodal">Cancel</el-button>
            <el-button :plain="true" @click="updateForm(form)">Save</el-button>
        </div>
    </el-dialog>
</template>


<script>
    export default {
        data(){
            return {
                formLabelWidth: '120px',
            }
        },
        props:['dialogFormVisible', 'form'],
        // props: {
        //     dialogFormVisible:'',
        //     form: {
        //         type:[String, Object]
        //     },
        // }, 
        props:{
            dialogFormVisible:'',
            form:{
                type:[Object,String]
            }
        },
        methods: {
            updateForm: function (formName) {
                let itemId = formName.id;
                let phone = formName.phone;
                let zone = formName.zone;
                this.$axios.put('http://127.0.0.1:8081/api/persons/detail/' + itemId, {
                    phone: phone,
                    zone: zone
                })
                    .then(function (response) {
                        console.log(response);
                        this.form = response.data;

                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                location.reload();
            },
            canclemodal: function () {
                this.$emit('canclemodal');
            }
        }

    }

</script>

用了些方法 但是不太好使还是报那个错误，请前端大神帮忙看看

Answer 1

vue 提醒你应该传一个string而不是现在的boolean
DBModal组件里面定义dialogFormVisible是string，在父组件引用的时候传的是false布尔型。

Answer 2

你得看你后台的数据类型是什么，然后看你form是个字符串，然而在element中model是要求object类的，把data里面form改成对象就行。

Answer 3

Hotmail signup guide, register for Hotmail for everyone.
http://hotmailentrarlogin.org