axios 帖子全部来自。(Vue.js)

Question

有没有办法只发布整个表单，而不必指定字段？我以为我在哪里见过它，但现在找不到了。

在 JQuery 中有点像这样：

$.ajax({
    data: $("form").serialize(),
    //etc.
});

这是在 Vue.js 组件中。

米克

Answer 1

一种可能的解决方案是使用@MUv-model提到的对象。

除了v-model，您还可以使用本机FormData对象，例如，当您以动态方式创建输入并且您不能/不想使用v-model以下方法绑定这些输入时：

new Vue({
  el: '#app',
  methods: {
    submit: function () {
      const formData = new FormData(this.$refs['form']); // reference to form element
      const data = {}; // need to convert it before using not with XMLHttpRequest
      for (let [key, val] of formData.entries()) {
        Object.assign(data, { [key]: val })
      }
      console.log(data);
      axios.post('https://jsonplaceholder.typicode.com/posts', data)
        .then(res => console.log(res.request.response))
    }
  }
});

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">
  <form ref="form" @submit.prevent="submit">
    <input type="text" name="name">
    <input type="number" name="age">
    <button type="submit">Submit</button>
  </form>
</div>

Answer 2

1. 如果您使用 VueJS，则应该用于v-model所有表单字段。https://v2.vuejs.org/v2/guide/forms.html
2. 在您的对象中创建data()名为form或类似的对象并使用v-model='form.fieldName'
3. 将所有内容一起发布为 JSONthis.axios.post('url', this.form).then(...