如何设置方法的输入值？

Question

我创建了签到系统（Laravel + Vuetify），所以我想问：如何从对象中获取用户 ID（API）并将它们放入输入中？

<template>
    <v-text-field
        v-model="debugItem.extra1_int"
        :counter="250"
        label="extra1_int"
        hint="userID"
        type="number"
        clearable>
    </v-text-field>
</template>

<script>
export default {
    data() {
        return {
            debugItem: {}, /* store new  debugItem */
            user: '',
        }
    },
    mounted() {
        this.getUser();
        this.debugItem.extra1_int = ***how to put here userID?***;
    },
    methods: {
    
        getUser() {
            axios.get('/user')
                .then(response => (this.user = response.data))
                .catch(error => console.log(error));
        },
        
        addDebugItem() { /* store new debugItem */
            this.axios
                .post('/api/debugs', this.debugItem)
                .then(response => (
                    this.$router.push({name: 'indexDebugs'})
                ))
                .catch(err => console.log(err))
                .finally(() => this.loading = false)
        }
    }
}
</script>

方法 getUser() http://127.0.0.1:8000/user return json-登录用户的对象：

{
    "id": 119,
    "name": "Johan",
    "email": "Johan@mail.com",
    "email_verified_at": null,
    "is_active": 1,
    "created_at": "2022-05-09T14:24:48.000000Z",
    "updated_at": "2022-05-09T14:24:48.000000Z"
}

谢谢。

Answer 1

<template>
    <v-text-field
        v-model="debugItem.userId"
        :counter="250"
        label="extra1_int"
        hint="userID"
        type="number"
        clearable>
    </v-text-field>
</template>

<script>
export default {
    data() {
        return {
            debugItem: {userId: null}, /* store new  debugItem */
            user: '',
        }
    },
    mounted() {
        this.getUser();
        this.debugItem.userId = this.user.id
    },
    methods: {
    
        getUser() {
            axios.get('/user')
                .then(response => (this.user = response.data))
                .catch(error => console.log(error));
        },
        
        addDebugItem() { /* store new debugItem */
            this.axios
                .post('/api/debugs', this.debugItem)
                .then(response => (
                    this.$router.push({name: 'indexDebugs'})
                ))
                .catch(err => console.log(err))
                .finally(() => this.loading = false)
        }
    }
}
</script>

Answer 2

我的建议是，不要在 mounted() 生命周期挂钩中为 this.debugItem.extra1_int 赋值。您可以在 axios 调用成功后在 getUser() 中分配它。

data() {
    return {
        debugItem: {},
        user: '',
    }
},
mounted() {
    this.getUser();
    this.debugItem.extra1_int = ***how to put here userID?***; ❌
},
methods: {
    getUser() {
        axios.get('/user')
            .then(response => {
                 this.user = response.data;
                 this.debugItem['extra1_int'] = this.user.id; ✅
             })
            .catch(error => console.log(error));
    }
}

如何设置方法的输入值？

How to set input value from method?

javascript

laravel

vuejs2

vuetify.js