[Vuejs]-Prop value not updating to be sent via Axios

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)

👤Daniel

Leave a comment