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
      })
    },
  }

CodePudding user response：

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');

CodePudding user response：

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.