Vue自定义v-model值从axios get请求获取后不更新值

Posted 2023-02-22

【中文标题】Vue自定义v-model值从axios get请求获取后不更新值

【英文标题】：Vue custom v-model value doesn't update the value after getting it from axios get request

【发布时间】：2018-12-06 08:29:23

【问题描述】：

我有一个名为“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-model 仍然是空的。

这里会有什么问题？我该如何解决？

提前致谢。

【参考方案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;

【讨论】：

当我将技能变量设置为 null 时，不是具有名为 name 的属性的对象。它起作用了，但首先引发了一个错误，提示未定义技能名称，但之后它出现在文本组件中。除非我打开控制台，否则我没有注意到错误。

@Abdel-azizhassan 你试过this.$set(this.skill, 'name', data.nam)吗？ （或Vue.$set()）。

@Abdel-azizhassan 您能否在您的代码中粘贴一个小提琴，以展示您不想要的行为？

您是否也按照我的建议在组件中创建了手表？

我在 TextInput 组件中做到了这一点，这是我使用的基本组件，然后它就可以工作了。我还有一个问题：为什么当我将技能设置为 null 时，它在没有观察者的情况下工作，但是当我使用技能作为对象时，我必须使用观察者来获得更改。