Vue2如何只提交表单值？

Question

我有一个表单页面，我用它来创建和更新

我的表单字段是这样的；

在此处输入图片描述

content: (...)
i18n: (...)
image: (...)
name: (...)
orderIndex: (...)
position: (...)

我可以成功提交请求。

当我们进行更新过程时，我通过这种方式获取数据并同步它。我收到了额外的数据 (this.myForm = response.data)

当我发送更新请求时，我只想发送表单字段，但它就像这样

我不想发送 createdAt、deleted、updatedAt、_id 字段

在此处输入图像描述

content: (...)
createdAt: (...)
deleted: (...)
i18n: (...)
image: (...)
isEnabled: (...)
name: (...)
orderIndex: (...)
position: (...)
updatedAt: (...)
_id: (...)

如何提交仅表单字段？ （我正在使用 element-ui 顺便说一句）

是否有类似 this.$refs.myForm.fields 或 this.$refs.myForm.values 我找不到它

例如，Angular 反应形式有这样的东西 --> 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

像这样解决：

const pick = require('lodash/pick')
const formKeys = Object.keys(this.testimonialForm)
this.testimonialForm = pick(this.testimonialData, formKeys)

感谢@gguney 的指导。

Answer 2

首先，您必须从后端获取对象。您不需要去您的商店。

只需使用 axios 来获取您的资源即可。

axios.get('/testimonial/get/' + id)
  .then(function (response) {
    this.testimonialForm = response.data.testimonial
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

您可以使用以下输入：

  <el-input
    v-model="testimonialForm.name"
    :placeholder="$t('form.name')"
    name="name"
    type="text"
  />

然后通过 axios 将您的推荐表发送到您的后端。

您可以将underscorejs添加到您的项目中并使用此功能

_.pick(testimonialForm, 'name', 'otherField');