Как отправить данные формы из B-модального в Vue

Question

Поэтому у меня возникла проблема при попытке отправить данные формы из b-modal в моем компоненте Vue. В моих инструментах разработки я вижу, что объект данных заполняется данными, однако при отправке формы он не отправляет мои данные.

вот форма

 <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>

Вот объект данных и метод из компонента

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,
      })
    }
   },

и вот отправляемый метод store

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)
        })
      })
    },

если я выполняю ответный ответ перед обработкой данных на моем бэкэнде, он показывает пустой объект данных. есть идеи почему?

Answer 1

Первый аргумент в vuex action - это context объект, payload передается как второй аргумент

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)
        })
      })
    }