时间戳

首页 > 解决方案 > Vue自定义v-model值从axios get请求获取后不更新值

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

问题描述

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

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

提前致谢。

标签： laravel-5vue.jsvuejs2vue-componentaxios

解决方案

您只需在初始化时为变量赋值v-model（value属性） （方法，仅在组件初始化时调用）。您没有可以对( ) 更改做出反应的代码，这将更新变量。contentdata()valuev-modelcontent

您应该为 创建一个手表value，然后this.content = this.value再次设置。

PS：另外，试试这个

this.skill = response.data.data;

做这个

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

推荐阅读