1. Vue2 is learning to encounter a problem in the execution process is to select a column in Table click to edit and then pop up the modal box, put the contents of the column into the modal box, but reported an error: [Vue warn]: Invalid prop: type check failed for prop "model". Expected Object, got String. Please take a look at
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>
then click Edit
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)
});
},
attach DBModal.vue code
<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>
used some methods, but it is not very good to report the error. Ask the front-end god to take a look at it
.