How to set input value from method?-CodePudding

I create check-in system (Laravel Vuetify), so i would like to ask: how to get userID from an object (API) en put them into input?

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

Method getUser() http://127.0.0.1:8000/user return json-object of logged user:

{
    "id": 119,
    "name": "Johan",
    "email": "[email protected]",
    "email_verified_at": null,
    "is_active": 1,
    "created_at": "2022-05-09T14:24:48.000000Z",
    "updated_at": "2022-05-09T14:24:48.000000Z"
}

Thanks.

CodePudding user response：

My suggestion, Instead of assigning value to this.debugItem.extra1_int in mounted() lifecycle hook. You can assign it in getUser() on success of axios call.

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));
    }
}

CodePudding user response：

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