Vue에서 B-modal에서 폼 데이터를 제출하는 방법

Vue에서 B-modal에서 폼 데이터를 제출하는 방법

이 때문에 Form data를 제출하는 데 문제가 있습니다.b-modalVue 컴포넌트에 있습니다.개발 도구에서 데이터 객체에 데이터가 채워져 있는 것을 확인할 수 있지만 양식을 제출하면 데이터가 전송되지 않습니다.

여기 서식이 있습니다

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

그리고 이것은 발송되는 스토어 방식입니다.

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

백엔드의 데이터를 처리하기 전에 리턴 응답을 하면 빈 데이터 객체가 표시됩니다.왜 그런지 알아요?

vuex 액션의 첫 번째 인수는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)
        })
      })
    }

언급URL : https://stackoverflow.com/questions/53269544/how-to-submit-form-data-from-b-modal-in-vue