Vue2 how to only submit form values? - forms

Question

I have a form page and I use it for both create and update
My form fields are like this;
enter image description here
content: (...)
i18n: (...)
image: (...)
name: (...)
orderIndex: (...)
position: (...)
I can successfully submit a request.
When we come to the update process, I get the data in this way and sync it. I'm getting extra data (this.myForm = response.data)
When I send an update request I just want the form fields to go but it goes like this
I don't want to send createdAt, deleted, updatedAt, _id fields
enter image description here
content: (...)
createdAt: (...)
deleted: (...)
i18n: (...)
image: (...)
isEnabled: (...)
name: (...)
orderIndex: (...)
position: (...)
updatedAt: (...)
_id: (...)
How can I submit only form fields? (I am using element-ui btw)
Is there something like this.$refs.myForm.fields or this.$refs.myForm.values I couldn't find it
For example Angular reactive form has something like this --> this.testimonialForm.patchValue(response.data);
data() {
return {
id: null,
testimonialForm: {
name: '',
position: '',
content: '',
orderIndex: '',
i18n: '',
image: {
path: ''
}
}
}
},
computed: {
...mapState({
testimonialData: state => state.testimonial.testimonial
})
},
created() {
if (this.$route.params.id) {
this.id = this.$route.params.id
this.fnGetTestimonialInfo(this.id)
}
},
methods: {
fnCreateTestimonial() {
this.$store.dispatch('testimonial/create', this.testimonialForm).then(() => {
this.$router.push('/testimonial/list')
})
},
fnUpdateTestimonial() {
const data = { id: this.id, data: this.testimonialForm }
this.$store.dispatch('testimonial/update', data).then(() => {
this.$router.push('/testimonial/list')
})
},
fnGetTestimonialInfo(id) {
this.$store.dispatch('testimonial/get', id).then(() => {
this.testimonialForm = this.testimonialData
})
},
}

Answer 1

Solved like this :
const pick = require('lodash/pick')
const formKeys = Object.keys(this.testimonialForm)
this.testimonialForm = pick(this.testimonialData, formKeys)
Thanks to #gguney for the guidance.

Answer 2

First of all, You have to fetch your object from backend. You do not neet to your store.
Just use axios to fetch your resource.
axios.get('/testimonial/get/' + id)
.then(function (response) {
this.testimonialForm = response.data.testimonial
console.log(response);
})
.catch(function (error) {
console.log(error);
});
You can use your inputs like:
<el-input
v-model="testimonialForm.name"
:placeholder="$t('form.name')"
name="name"
type="text"
/>
Then send your testimonialForm to your backend via axios.
You can add underscorejs to your project and use this function
_.pick(testimonialForm, 'name', 'otherField');