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

Posted 2023-02-22

【中文标题】Vue中如何从B-modal提交表单数据

【英文标题】：How To Submit Form Data From B-modal In Vue

【发布时间】：2019-04-15 14:38:02

【问题描述】：

所以我在尝试从 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,
      )
    
   ,

这里是正在调度的 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)
        )
      )
    ,

如果我在处理后端数据之前进行返回响应，则会显示一个空数据对象。任何想法为什么？

【问题讨论】：

axios.post('/register', name: user.name, email: user.email, password: user.password, ) this.user.name, this.user.email, this.user.password 测试

@HamiltonGabriel，你是说将name: user.name 更改为name: this.user.name？

正确，测试一下。

@HamiltonGabriel，查看答案。

【参考方案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)
        )
      )
    

【讨论】：

是的，我想了一会儿，但谢谢你的评论