如何从Vue中的B-模态提交表单数据



因此,我在尝试从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)
})
})
},

如果在处理后端的数据之前进行返回响应,则会显示一个空的数据对象。有什么想法吗?

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

相关内容

  • 没有找到相关文章

最新更新