[Vuejs]-How Do I Use Axios to Post Form Data?

0👍

There are multiple problems in your code:

  1. You are using the data object of your component as models for your form, but you are never mutating your state with the changed values
  2. You should make use of the context passed to each action inside the Vuex store (https://vuex.vuejs.org/guide/actions.html):

Change this:

submitProduct: function () {   
    axios.post('http://localhost:8081/product', {
      name: '' + this.data.name,
      description: '' + this.data.description
    }) 
}

To this:

submitProduct: function (context) {
  axios
    .post('http://localhost:8081/product', {
      name: '' + context.store.name,
      description: '' + context.store.description
    })
}

I would probably also suggest to not define component specific actions inside your store. Those action should be used for store related actions.

0👍

Figured it out.

Just had to do this to the action

submitProduct: function () {
  const name = document.getElementById('name').value
  const description = document.getElementById('description').value
  axios
    .post('http://localhost:8081/product', {
      name: name,
      description: description
    })
}

Leave a comment