Vue custom v-model value не обновляет значение после получения его из запроса get axios

Question

У меня есть компонент с именем «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>

Я использовал этот компонент в другом компоненте:

<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>

Как видите, я создал объект навыка с пустым свойством с именем name и сделал запрос axios, чтобы получить указанный объект, используя его идентификатор. После этого должна быть обновлена ​​функция навыка запроса axios, но произошло то, что v-модель все еще пуста.

В чем здесь проблема? и как я могу решить это?

Заранее спасибо.

Answer 1

Вы присваиваете v-model значение (свойство value) только своей переменной content при инициализации (метод data(), который вызывается только при инициализации компонента). У вас нет кода, который мог бы реагировать на изменение value (v-model), который обновил бы переменную content.

Вы должны создать часы для value, а затем снова установить this.content = this.value.

PS: попробуйте вместо этого

this.skill = response.data.data;

сделать это

this.skill.name = response.data.data.name;