Cfrgtkky

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)

        })

      })

    }