Vue自定义v模型值在从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请求，使用它的id获取指定的对象。在此情况下，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;