Vue custom v-model value doesn't update the value after getting it from axios get request

I have a component called "TextInput":

            <template>
            <q-input
                v-model="content"
                @input="handleInput"
                color="secondary"
                :float-label="floatLabel" />
        </template>

        <script>
            import { QInput, QField } from "quasar-framework/dist/quasar.mat.esm";
            export default {
                props: ['floatLabel', 'value'],
                data () {
                    return {
                        content: this.value
                    }
                },
                components: {
                    'q-field': QField,
                    'q-input': QInput,
                },
                methods: {
                    handleInput(e) {
                        this.$emit('input', this.content)
                    }
                }
            }
        </script>

I used this component in another component:

            <template>
            <card card-title = "Edit Skill">
                <img slot="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAJeSURBVEhLzZVPSFRRGMVnKopI+odghFjWQDD05v8/dGCEaFEhbnwIQQTVol2rCHElQog7lwm6qdy0jBJpWQvBImgTEqGYoKIDYhS4qt9n38Qb5973ni7KA2fuPd937jt35t33JrKvUCqVjmaz2XI8Hm8qFArHmT8KS/ytehk7UqlUHPOzTCbzA36EDroNbsEnQcS/zFjWy5mRy+VuYaxiHIDNWo4wl6ANlb5g/VvfIAw3ZDfQ0dJfWIKi8uE4zil6LuuKon2DEonEMZpL6XT6ipbqsDOIi12EH/AnisViC/MqfK49exCN+xheqWyAN0huNN5FOAnlF/gMh+l3Sp+5b9AUu+tT2QBvEKfwMPMemXPR28wfy7wG3yCaa8lk8rzKBniDgmANkgCa6yqN8AYx3sX/xsB+6TOag2iM0phQaYQ3CL88V+5OUrefOp6byzSq+Xz+jJaM4AC049vEf8GPcv+MQRSn4UOVRnBIcixchfN4v1r4jf4vwmTj9UGIq/BLLBY7oiUj8IyxeEilEWymG88M0yj+WQI7/nQAhV6ac4xdWjKCRXfwzMMR/MMm0nvK+BO+gCvoE7p8G1GK9yguMG4/1TYQdg2f8U3tJdd5YH1M+NrnMFRV7hoE9MhfikpfHMC8xU5Oqg4NNnmWTW7K/5WW/IFZ3lcZlaHBBgfhmMpgYH5Jzk2VocG69/C6ymBglrf3u93+fKxb5aBcUhkM13UPEjTOwu+MtYfwtbatwL8B645yKHB6TrPDNIvlxflJy1bsOagGFpf/SZDcK4JKKq0gpKtSqRxS+b8QifwGm+z/Ksto7VkAAAAASUVORK5CYII=">
                <form class="clearfix" slot="form">
                    <bim-text v-model="skill.name" :floatLabel="input_label"></bim-text>
                    <q-btn
                        @click="edit"
                        icon="save"
                        size="14px"
                        color="secondary"
                        label="Save" />
                </form>
            </card>
        </template>

        <script>
            import { QBtn } from "quasar-framework/dist/quasar.mat.esm";
            import { Card, TextInput } from "../../base";
            import router from '../../../routes/routes';
            export default {
                data: function () {
                    return {
                        id: this.$route.params.id,
                        skill: {
                            name: ''
                        },
                        input_label: 'Skill Name'
                    }
                },
                components: {
                    'card': Card,
                    'bim-text': TextInput,
                    'q-btn': QBtn
                },
                methods: {
                    edit: function(){
                        axios.patch('/api/skills/'+this.id, {
                            name: this.skill.name,
                        }, { headers: { Authorization: 'Bearer '.concat(localStorage.getItem('token')) } })
                        .then(response => {
                        alert('success');
                        router.push({ name: "IndexSkills"});
                        }).catch(error => {
                            console.log('dd');
                        });
                    }
                },
                mounted() {
                    axios.get("/api/skills/"+this.id, { headers: { Authorization: 'Bearer '.concat(localStorage.getItem('token')) } })
                        .then(response => {
                            this.skill = response.data.data;
                        }).catch(error => {
                            alert('error')
                        });
                }
            }
        </script>

        <style scoped>
            .q-btn{
                float: right;
                margin-top: 20px;
            }
        </style>

As you can see, I created an skill object with empty property called name and I made an axios request to get the specified object using its id. In then function of the axios request skill should be updated but what happened was that the v-model still empty.

What would be the problem here? and how can I solve it?

Thanks in advance.

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2IsDXMJ
via IFTTT