What is the correct way to update parent data using a child component?
In the child component, I am directly modifying parent data through props. I'm unsure if this is the right approach.
According to the Vue documentation:
When the parent property updates, it will flow down to the child component, but not vice versa.
Here is an example of a child component:
<script>
export default {
props: ['user'],
data: function () {
return {
linkName: '',
linkValue: '',
}
},
methods: {
addLink: function (event) {
event.preventDefault();
this.$http.post('/user/link', {name: this.linkName, key: this.linkValue}).then(response => {
this.user.links.push(response.data);
}, response => {
// Handle error
}
});
},
}
}
</script>
I have used
this.user.links.push(response.data);props: ['user'].