How To Submit Form Data From B-modal In Vue












0














So I am having a issue trying to submit form data from a b-modal in my Vue component. I can see in my dev tools that the data object is being populated with the data however when I submit my form It doesn't send my data.



here is the form



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


Here is the data object and method from the component



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


and here is the store method being dispatched



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


if I do a return response before processing the data on my back end it shows a empty data object. any ideas why?










share|improve this question






















  • axios.post('/register', { name: user.name, email: user.email, password: user.password, }) this.user.name, this.user.email, this.user.password Test
    – Hamilton Gabriel
    Nov 12 at 20:25












  • @HamiltonGabriel, are you saying to change name: user.name to name: this.user.name?
    – TJ Weems
    Nov 12 at 20:45










  • Correct, test this.
    – Hamilton Gabriel
    Nov 12 at 23:27










  • @HamiltonGabriel, view answer.
    – TJ Weems
    Nov 13 at 2:08
















0














So I am having a issue trying to submit form data from a b-modal in my Vue component. I can see in my dev tools that the data object is being populated with the data however when I submit my form It doesn't send my data.



here is the form



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


Here is the data object and method from the component



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


and here is the store method being dispatched



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


if I do a return response before processing the data on my back end it shows a empty data object. any ideas why?










share|improve this question






















  • axios.post('/register', { name: user.name, email: user.email, password: user.password, }) this.user.name, this.user.email, this.user.password Test
    – Hamilton Gabriel
    Nov 12 at 20:25












  • @HamiltonGabriel, are you saying to change name: user.name to name: this.user.name?
    – TJ Weems
    Nov 12 at 20:45










  • Correct, test this.
    – Hamilton Gabriel
    Nov 12 at 23:27










  • @HamiltonGabriel, view answer.
    – TJ Weems
    Nov 13 at 2:08














0












0








0







So I am having a issue trying to submit form data from a b-modal in my Vue component. I can see in my dev tools that the data object is being populated with the data however when I submit my form It doesn't send my data.



here is the form



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


Here is the data object and method from the component



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


and here is the store method being dispatched



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


if I do a return response before processing the data on my back end it shows a empty data object. any ideas why?










share|improve this question













So I am having a issue trying to submit form data from a b-modal in my Vue component. I can see in my dev tools that the data object is being populated with the data however when I submit my form It doesn't send my data.



here is the form



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


Here is the data object and method from the component



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


and here is the store method being dispatched



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


if I do a return response before processing the data on my back end it shows a empty data object. any ideas why?







forms vue.js vuex bootstrap-vue






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 12 at 20:22









TJ Weems

14219




14219












  • axios.post('/register', { name: user.name, email: user.email, password: user.password, }) this.user.name, this.user.email, this.user.password Test
    – Hamilton Gabriel
    Nov 12 at 20:25












  • @HamiltonGabriel, are you saying to change name: user.name to name: this.user.name?
    – TJ Weems
    Nov 12 at 20:45










  • Correct, test this.
    – Hamilton Gabriel
    Nov 12 at 23:27










  • @HamiltonGabriel, view answer.
    – TJ Weems
    Nov 13 at 2:08


















  • axios.post('/register', { name: user.name, email: user.email, password: user.password, }) this.user.name, this.user.email, this.user.password Test
    – Hamilton Gabriel
    Nov 12 at 20:25












  • @HamiltonGabriel, are you saying to change name: user.name to name: this.user.name?
    – TJ Weems
    Nov 12 at 20:45










  • Correct, test this.
    – Hamilton Gabriel
    Nov 12 at 23:27










  • @HamiltonGabriel, view answer.
    – TJ Weems
    Nov 13 at 2:08
















axios.post('/register', { name: user.name, email: user.email, password: user.password, }) this.user.name, this.user.email, this.user.password Test
– Hamilton Gabriel
Nov 12 at 20:25






axios.post('/register', { name: user.name, email: user.email, password: user.password, }) this.user.name, this.user.email, this.user.password Test
– Hamilton Gabriel
Nov 12 at 20:25














@HamiltonGabriel, are you saying to change name: user.name to name: this.user.name?
– TJ Weems
Nov 12 at 20:45




@HamiltonGabriel, are you saying to change name: user.name to name: this.user.name?
– TJ Weems
Nov 12 at 20:45












Correct, test this.
– Hamilton Gabriel
Nov 12 at 23:27




Correct, test this.
– Hamilton Gabriel
Nov 12 at 23:27












@HamiltonGabriel, view answer.
– TJ Weems
Nov 13 at 2:08




@HamiltonGabriel, view answer.
– TJ Weems
Nov 13 at 2:08












1 Answer
1






active

oldest

votes


















1














The first argument in vuex action is context object, the payload is passed as the second argument



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





share|improve this answer





















  • yeah I figured that out after a little bit, but thank you for the comment
    – TJ Weems
    Nov 13 at 2:08











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53269544%2fhow-to-submit-form-data-from-b-modal-in-vue%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









1














The first argument in vuex action is context object, the payload is passed as the second argument



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





share|improve this answer





















  • yeah I figured that out after a little bit, but thank you for the comment
    – TJ Weems
    Nov 13 at 2:08
















1














The first argument in vuex action is context object, the payload is passed as the second argument



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





share|improve this answer





















  • yeah I figured that out after a little bit, but thank you for the comment
    – TJ Weems
    Nov 13 at 2:08














1












1








1






The first argument in vuex action is context object, the payload is passed as the second argument



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





share|improve this answer












The first argument in vuex action is context object, the payload is passed as the second argument



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






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 13 at 1:21









ittus

5,9821723




5,9821723












  • yeah I figured that out after a little bit, but thank you for the comment
    – TJ Weems
    Nov 13 at 2:08


















  • yeah I figured that out after a little bit, but thank you for the comment
    – TJ Weems
    Nov 13 at 2:08
















yeah I figured that out after a little bit, but thank you for the comment
– TJ Weems
Nov 13 at 2:08




yeah I figured that out after a little bit, but thank you for the comment
– TJ Weems
Nov 13 at 2:08


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.





Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


Please pay close attention to the following guidance:


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53269544%2fhow-to-submit-form-data-from-b-modal-in-vue%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Bressuire

Vorschmack

Quarantine