1👍
The issue is that you’re using :value
to set the value, and not getting it from the updateDisplayName
function. You should be passing the event.target.value
instead of the "static" value. But a better way to solve it is to use a data property with v-model
The other problem (I see) is that you’re mutating a prop inside the component. Run-time Vue will let you do that, but if you may get the warning: "Avoid mutating a prop directly"
The prop should be treated as immutable form the perspective of the component, meaning that the component should not attempt to change it. Given that you’re using PHP to generate those values render-time, those values are not going to change. If you want a passed prop to be mutable by the component, you should copy the value into the component’s instance.
export default {
props: ['name'],
data: function () {
return {
name_val: this.name
}
},
methods: {
updateDisplayName: _.debounce(function(){
axios.post('url', {
display_name: this.name_val
})
.then(response => {
// Show success
})
.catch(response => {
Swal.fire({
type: 'error',
title: 'Error'
});
})
}, 1500),
}
}
<input type="text" @input="updateDisplayName" v-model="name_val">
TL;DR;
You could solve it without copying the initial value into data just doing this:
<input type="text" @input="updateDisplayName" v-model="name">
but it’s not a good idea (refer to the warning mentioned above) or link: https://v2.vuejs.org/v2/guide/migration.html#Prop-Mutation-deprecated
update
Also, as @skirtle pointed out, should use function
instead of array function in the debounce function. Looks like lodash is using function.apply
to bind a context (https://github.com/lodash/lodash/blob/4.17.15/lodash.js#L10333)