How can I submit only form elements in Vue[2].js? - forms

Question

I have a form page and I use it for both create and update
My form fields are like this;
myForm: {
name: (...)
email: (...)
password: (...)
}
I can successfully submit a request.
When we come to the update process, I get the data in this way (this.myForm = response.data)
When I send an update request I just want the form fields to go but it goes like this
myForm: {
name: (...)
email: (...)
password: (...)
createdAt: (...)
updatedAt: (...)
_id: (...)
}
I don't want to send createdAt, updatedAt, _id fields
How can I submit only form fields in Vue.js or Element-ui? (I am using element-ui btw)
Is there something like this.$refs.myForm.fields or this.$refs.myForm.values I couldn't find it
My code: Code picture
<template>
<div class="app-container">
<el-form ref="myForm" label-position="top" :model="myForm">
<el-form-item>
<label>Name</label>
<el-input v-model="myForm.name" />
</el-form-item>
<el-form-item>
<label>Email</label>
<el-input v-model="myForm.email" />
</el-form-item>
<el-form-item>
<label>Password</label>
<el-input v-model="myForm.password" />
</el-form-item>
<el-button type="primary" #click="submitForm('myForm')">Kaydet</el-button>
</el-form>
</div>
</template>
<script>
export default {
name: 'UserForm',
data() {
return {
myForm: {
name: '',
email: '',
password: ''
}
}
},
created() {
if (this.$route.params.id) {
this.getFormData(this.$route.params.id)
}
},
methods: {
submitForm() {
if (!this.$route.params.id) {
this.$store.dispatch('user/create', this.myForm)
} else {
this.$store.dispatch('user/update/', this.myForm)
}
},
getFormData(id) {
this.$store.dispatch('user/get', id).then((response) => {
this.myForm = response.data
})
}
}
}
</script>

Answer 1

Instead of posting the entire 'this.myForm', just specify the fields you want to post in a new object.
submitForm() {
if (!this.$route.params.id) {
this.$store.dispatch('user/create', this.myForm)
} else {
this.$store.dispatch('user/update/', {
name: this.myForm.name,
email: this.myForm.email,
password: this.myForm.password
})
}
}
UPDATE: Following comments from OP, if you're expecting more that 'name', 'email', and 'password', you can just delete the properties you don't want to send.
submitForm() {
if (!this.$route.params.id) {
this.$store.dispatch('user/create', this.myForm)
} else {
delete this.myForm.createdAt,
delete this.myForm.updatedAt,
delete this.myForm._id
this.$store.dispatch('user/update/', this.myForm)
}
}