[Vue.js] Ajax submission of a Symfony form with Vue-resource and a FormData object

Published on 2019-04-23 • Modified on 2020-04-20

[Edit 2020-04-18] Vue resource is not maintained any-more, please use a third-party library like Axios.
Sometimes, we need to submit a form with Ajax manually. You need to get all the fields' values composing the form and making a manual submission as if a user had clicked the submit button. Here is the easiest way I found using the vue.js resource HTTP client and a JavaScript FormData object. The main pro is that it avoids building the data manually or making useless loops. Open your JavaScript console to see the content of response.body.functions.

/* global post13 */
/**
 * I am using a JavaScript module to isolate the code of each snippet.
 * In fact it's a Vue.js mixin. Take the code called by the mounted()
 * or the snippetXX() function.
 */
export default {
  data: {
    post13: post13 // same data as the post n°13
  },
  methods: {
    snippet22: function () {
      const formData = new FormData()
      formData.append('uri', this.post13.uri)
      this.$http.post(this.post13.refreshPath, formData).then(response => {
        console.log(response.body.functions)
      })
      // That's it! 😁
    }
  },
  mounted () {
    if (this.isArticle(22)) {
      this.snippet22()
    }
  }
}