Odtnhj

So I am having a issue trying to submit form data from a b-modal in my Vue component. I can see in my dev tools that the data object is being populated with the data however when I submit my form It doesn't send my data.

here is the form

 <b-modal v-model="modalShow" id="myModal">
 <form>
 <div>
 <br>
 <input type="text" placeholder="Name" v-model="user.name">
 <br>
 <input type="text" placeholder="Email" v-model="user.email">
 <br>
 <input type="text" placeholder="Password" v-model="user.password">
 <br>
 </div>
 <div>
 <b-btn @click="modalShow = false">Cancel</b-btn>
 <b-btn variant="outline-primary" @click="addUser">Create</b-btn>
 </div>
 </form>
 </b-modal>

Here is the data object and method from the component

data() 
 return 
 modalShow: false,
 user: 
 name: '',
 email: '',
 password: '',
 
 
 ,
 components:
 'b-modal': bModal,
 ,
 directives: 
 'b-modal': bModalDirective
 ,
 computed: 
 ...mapGetters(['users']),
 ,
 methods: 
 addUser() 
 this.$store.dispatch('addUser', 
 name: this.user.name,
 email: this.user.email,
 password: this.user.password,
 )
 
 ,

and here is the store method being dispatched

addUser(user) 
 return new Promise((resolve, reject) => 
 axios.post('/register', 
 name: user.name,
 email: user.email,
 password: user.password,
 )
 .then(response => 
 console.log(response)
 resolve(response)
 )
 .catch(error => 
 reject(error.response.data)
 )
 )
 ,

if I do a return response before processing the data on my back end it shows a empty data object. any ideas why?

The first argument in vuex action is context object, the payload is passed as the second argument

addUser(context, user) 
 return new Promise((resolve, reject) => 
 axios.post('/register', 
 name: user.name,
 email: user.email,
 password: user.password,
 )
 .then(response => 
 console.log(response)
 resolve(response)
 )
 .catch(error => 
 reject(error.response.data)
 )
 )