如何在 Vue 中从 B-modal 提交表单数据

Question

所以我在尝试从我的 Vue 组件中的 b-modal 提交表单数据时遇到问题。我可以在我的开发工具中看到数据对象正在填充数据，但是当我提交表单时它没有发送我的数据。

这是表格

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

如果我在后端处理数据之前执行 return 响应，它会显示一个空数据对象。有什么想法吗？

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

如何在 Vue 中从 B-modal 提交表单数据

How To Submit Form Data From B-modal In Vue

forms

vue.js

vuex

bootstrap-vue