Can't assign correct data to model through event emit
everyone. I'm working on a project and I'm stuck on a particular point. On the backend side, I'm using Laravel 5.6 and MySQL. I make a request that returns a simple JSON like this:
{
id: 1,
name: "someone",
salary_min: 2600.5,
salary_max: 3512.35
}
And I fecth this result in the frontend using Vue + axios like any other GET request and assign to a list of employees.
this.axios.get(process.env.ROOT_API + 'employee/${id}', auth)
.then(response => {
if (response.data) {
this.employee = response.data;
}
}, (error) => {
console.log(error.response.data);
});I'm passing this data to another child component througn a method defined like so:
onEdit (id) {
// Send data received from axios and stored in 'emmployee'
bus.$emit('editEmployee', this.employee);
}Inside the child component, I'm listening to the event like this:
mounted () {
bus.$on('editEmployee', (data) => {
console.log(data);
this.newEmployee = data;
console.log(this.newEmployee);
}
}The result of log is as following:
// data from parent component
{ id: 1, name: "someone", salary_min: 2600.5, salary_max: 3512.35 }
// newEmployee model
{ id: 1, name: "someone", salary_min: "0.00", salary_max: "0.00" }Somehow, during assignment, the decimal values are being zeroed and converted to string. I can't understand what's happening. Any clue?
vuejs2 vue-component
asked Nov 25 '18 at 1:09
Paulo GoesPaulo Goes
62
add a comment |
everyone. I'm working on a project and I'm stuck on a particular point. On the backend side, I'm using Laravel 5.6 and MySQL. I make a request that returns a simple JSON like this:
{
id: 1,
name: "someone",
salary_min: 2600.5,
salary_max: 3512.35
}
And I fecth this result in the frontend using Vue + axios like any other GET request and assign to a list of employees.
this.axios.get(process.env.ROOT_API + 'employee/${id}', auth)
.then(response => {
if (response.data) {
this.employee = response.data;
}
}, (error) => {
console.log(error.response.data);
});I'm passing this data to another child component througn a method defined like so:
onEdit (id) {
// Send data received from axios and stored in 'emmployee'
bus.$emit('editEmployee', this.employee);
}Inside the child component, I'm listening to the event like this:
mounted () {
bus.$on('editEmployee', (data) => {
console.log(data);
this.newEmployee = data;
console.log(this.newEmployee);
}
}The result of log is as following:
// data from parent component
{ id: 1, name: "someone", salary_min: 2600.5, salary_max: 3512.35 }
// newEmployee model
{ id: 1, name: "someone", salary_min: "0.00", salary_max: "0.00" }Somehow, during assignment, the decimal values are being zeroed and converted to string. I can't understand what's happening. Any clue?
vuejs2 vue-component
asked Nov 25 '18 at 1:09
Paulo GoesPaulo Goes
62
You are trying to send data from parent to child components? Can you debugthis.employeeinsideonEditmethod pls?
– Jérôme
Nov 27 '18 at 11:22
Jérôme, the console shows the object exactly like this: { { id: 1, name: "someone", salary_min: 2600.5, salary_max: 3512.35 }
– Paulo Goes
Nov 27 '18 at 18:25
But I forgot a detail: This comes from a axios.get request and it is passed through $emit event to another component. From the other component, I get this value and assign it to the model that will be used to fill in the Update Form. By the way, this is the only trouble I have: whenever I try to update a a single employee... It seems like the value gets zeroed before gets assigned to the model.
– Paulo Goes
Nov 27 '18 at 18:29
this.newEmployee = data;should only assign data without changing types tothis.newEmployee. I tried to reproduce your problem without success, take a look at jsfiddle.net/eywraw8t/478769
– Jérôme
Nov 27 '18 at 20:01
Thank you very much, Jérôme. I found a way to assign it.
– Paulo Goes
Dec 7 '18 at 15:20
add a comment |
everyone. I'm working on a project and I'm stuck on a particular point. On the backend side, I'm using Laravel 5.6 and MySQL. I make a request that returns a simple JSON like this:
{
id: 1,
name: "someone",
salary_min: 2600.5,
salary_max: 3512.35
}
And I fecth this result in the frontend using Vue + axios like any other GET request and assign to a list of employees.
this.axios.get(process.env.ROOT_API + 'employee/${id}', auth)
.then(response => {
if (response.data) {
this.employee = response.data;
}
}, (error) => {
console.log(error.response.data);
});I'm passing this data to another child component througn a method defined like so:
onEdit (id) {
// Send data received from axios and stored in 'emmployee'
bus.$emit('editEmployee', this.employee);
}Inside the child component, I'm listening to the event like this:
mounted () {
bus.$on('editEmployee', (data) => {
console.log(data);
this.newEmployee = data;
console.log(this.newEmployee);
}
}The result of log is as following:
// data from parent component
{ id: 1, name: "someone", salary_min: 2600.5, salary_max: 3512.35 }
// newEmployee model
{ id: 1, name: "someone", salary_min: "0.00", salary_max: "0.00" }Somehow, during assignment, the decimal values are being zeroed and converted to string. I can't understand what's happening. Any clue?
vuejs2 vue-component
asked Nov 25 '18 at 1:09
Paulo GoesPaulo Goes
62
everyone. I'm working on a project and I'm stuck on a particular point. On the backend side, I'm using Laravel 5.6 and MySQL. I make a request that returns a simple JSON like this:
{
id: 1,
name: "someone",
salary_min: 2600.5,
salary_max: 3512.35
}
And I fecth this result in the frontend using Vue + axios like any other GET request and assign to a list of employees.
this.axios.get(process.env.ROOT_API + 'employee/${id}', auth)
.then(response => {
if (response.data) {
this.employee = response.data;
}
}, (error) => {
console.log(error.response.data);
});I'm passing this data to another child component througn a method defined like so:
onEdit (id) {
// Send data received from axios and stored in 'emmployee'
bus.$emit('editEmployee', this.employee);
}Inside the child component, I'm listening to the event like this:
mounted () {
bus.$on('editEmployee', (data) => {
console.log(data);
this.newEmployee = data;
console.log(this.newEmployee);
}
}The result of log is as following:
// data from parent component
{ id: 1, name: "someone", salary_min: 2600.5, salary_max: 3512.35 }
// newEmployee model
{ id: 1, name: "someone", salary_min: "0.00", salary_max: "0.00" }Somehow, during assignment, the decimal values are being zeroed and converted to string. I can't understand what's happening. Any clue?
this.axios.get(process.env.ROOT_API + 'employee/${id}', auth)
.then(response => {
if (response.data) {
this.employee = response.data;
}
}, (error) => {
console.log(error.response.data);
});this.axios.get(process.env.ROOT_API + 'employee/${id}', auth)
.then(response => {
if (response.data) {
this.employee = response.data;
}
}, (error) => {
console.log(error.response.data);
});onEdit (id) {
// Send data received from axios and stored in 'emmployee'
bus.$emit('editEmployee', this.employee);
}onEdit (id) {
// Send data received from axios and stored in 'emmployee'
bus.$emit('editEmployee', this.employee);
}mounted () {
bus.$on('editEmployee', (data) => {
console.log(data);
this.newEmployee = data;
console.log(this.newEmployee);
}
}mounted () {
bus.$on('editEmployee', (data) => {
console.log(data);
this.newEmployee = data;
console.log(this.newEmployee);
}
}// data from parent component
{ id: 1, name: "someone", salary_min: 2600.5, salary_max: 3512.35 }
// newEmployee model
{ id: 1, name: "someone", salary_min: "0.00", salary_max: "0.00" }// data from parent component
{ id: 1, name: "someone", salary_min: 2600.5, salary_max: 3512.35 }
// newEmployee model
{ id: 1, name: "someone", salary_min: "0.00", salary_max: "0.00" }vuejs2 vue-component
vuejs2 vue-component
asked Nov 25 '18 at 1:09
Paulo GoesPaulo Goes
62
asked Nov 25 '18 at 1:09
Paulo GoesPaulo Goes
62
asked Nov 25 '18 at 1:09
Paulo GoesPaulo Goes
62
asked Nov 25 '18 at 1:09
Paulo GoesPaulo Goes
62
asked Nov 25 '18 at 1:09
Paulo GoesPaulo Goes
62
62
You are trying to send data from parent to child components? Can you debugthis.employeeinsideonEditmethod pls?
– Jérôme
Nov 27 '18 at 11:22
Jérôme, the console shows the object exactly like this: { { id: 1, name: "someone", salary_min: 2600.5, salary_max: 3512.35 }
– Paulo Goes
Nov 27 '18 at 18:25
But I forgot a detail: This comes from a axios.get request and it is passed through $emit event to another component. From the other component, I get this value and assign it to the model that will be used to fill in the Update Form. By the way, this is the only trouble I have: whenever I try to update a a single employee... It seems like the value gets zeroed before gets assigned to the model.
– Paulo Goes
Nov 27 '18 at 18:29
this.newEmployee = data;should only assign data without changing types tothis.newEmployee. I tried to reproduce your problem without success, take a look at jsfiddle.net/eywraw8t/478769
– Jérôme
Nov 27 '18 at 20:01
Thank you very much, Jérôme. I found a way to assign it.
– Paulo Goes
Dec 7 '18 at 15:20
add a comment |
You are trying to send data from parent to child components? Can you debugthis.employeeinsideonEditmethod pls?
– Jérôme
Nov 27 '18 at 11:22
Jérôme, the console shows the object exactly like this: { { id: 1, name: "someone", salary_min: 2600.5, salary_max: 3512.35 }
– Paulo Goes
Nov 27 '18 at 18:25
But I forgot a detail: This comes from a axios.get request and it is passed through $emit event to another component. From the other component, I get this value and assign it to the model that will be used to fill in the Update Form. By the way, this is the only trouble I have: whenever I try to update a a single employee... It seems like the value gets zeroed before gets assigned to the model.
– Paulo Goes
Nov 27 '18 at 18:29
this.newEmployee = data;should only assign data without changing types tothis.newEmployee. I tried to reproduce your problem without success, take a look at jsfiddle.net/eywraw8t/478769
– Jérôme
Nov 27 '18 at 20:01
Thank you very much, Jérôme. I found a way to assign it.
– Paulo Goes
Dec 7 '18 at 15:20
You are trying to send data from parent to child components? Can you debug
this.employee inside onEdit method pls?– Jérôme
Nov 27 '18 at 11:22
You are trying to send data from parent to child components? Can you debug
this.employee inside onEdit method pls?– Jérôme
Nov 27 '18 at 11:22
Jérôme, the console shows the object exactly like this: { { id: 1, name: "someone", salary_min: 2600.5, salary_max: 3512.35 }
– Paulo Goes
Nov 27 '18 at 18:25
Jérôme, the console shows the object exactly like this: { { id: 1, name: "someone", salary_min: 2600.5, salary_max: 3512.35 }
– Paulo Goes
Nov 27 '18 at 18:25
But I forgot a detail: This comes from a axios.get request and it is passed through $emit event to another component. From the other component, I get this value and assign it to the model that will be used to fill in the Update Form. By the way, this is the only trouble I have: whenever I try to update a a single employee... It seems like the value gets zeroed before gets assigned to the model.
– Paulo Goes
Nov 27 '18 at 18:29
But I forgot a detail: This comes from a axios.get request and it is passed through $emit event to another component. From the other component, I get this value and assign it to the model that will be used to fill in the Update Form. By the way, this is the only trouble I have: whenever I try to update a a single employee... It seems like the value gets zeroed before gets assigned to the model.
– Paulo Goes
Nov 27 '18 at 18:29
this.newEmployee = data; should only assign data without changing types to this.newEmployee. I tried to reproduce your problem without success, take a look at jsfiddle.net/eywraw8t/478769– Jérôme
Nov 27 '18 at 20:01
this.newEmployee = data; should only assign data without changing types to this.newEmployee. I tried to reproduce your problem without success, take a look at jsfiddle.net/eywraw8t/478769– Jérôme
Nov 27 '18 at 20:01
Thank you very much, Jérôme. I found a way to assign it.
– Paulo Goes
Dec 7 '18 at 15:20
Thank you very much, Jérôme. I found a way to assign it.
– Paulo Goes
Dec 7 '18 at 15:20
add a comment |
0
active
oldest
votes
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53463833%2fcant-assign-correct-data-to-model-through-event-emit%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53463833%2fcant-assign-correct-data-to-model-through-event-emit%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
You are trying to send data from parent to child components? Can you debug
this.employeeinsideonEditmethod pls?– Jérôme
Nov 27 '18 at 11:22
Jérôme, the console shows the object exactly like this: { { id: 1, name: "someone", salary_min: 2600.5, salary_max: 3512.35 }
– Paulo Goes
Nov 27 '18 at 18:25
But I forgot a detail: This comes from a axios.get request and it is passed through $emit event to another component. From the other component, I get this value and assign it to the model that will be used to fill in the Update Form. By the way, this is the only trouble I have: whenever I try to update a a single employee... It seems like the value gets zeroed before gets assigned to the model.
– Paulo Goes
Nov 27 '18 at 18:29
this.newEmployee = data;should only assign data without changing types tothis.newEmployee. I tried to reproduce your problem without success, take a look at jsfiddle.net/eywraw8t/478769– Jérôme
Nov 27 '18 at 20:01
Thank you very much, Jérôme. I found a way to assign it.
– Paulo Goes
Dec 7 '18 at 15:20