Why is this happening? I'm getting correct display in console output and right amount of rows in UI but I'm getting no outputs

142
February 15, 2021, at 01:20 AM
<template>
    <div v-if = "currentUser" class="edit-form">
        <h4>User</h4>
            <form>
                <div class = "form-group">
                    <label for = "name">Name</label>
                    <input type = "text" class = "form-control" id = "name"
                    v-model = "currentUser.Ime"
                    />
                </div>
                <div class = "form-group">
                    <label for = "lastName">Last name</label>
                    <input type = "text" class = "form-control" id = "lastName"
                    v-model = "currentUser.Prezime" 
                    />
                </div>
                <div class = "form-group">
                    <label for = "address">Address</label>
                    <input type="text" class = "form-control" id="address"
                        v-model = "currentUser.Adresa"
                    />
                </div>
            <div class="col-md-6">
                <h4>Phone Numbers</h4>
                    <ul class="list-group">
                        <li class="list-group-item"
                        v-for="number in numbers" :key="number"
                        >   
                        {{ number.Broj }}
                        </li>
                    </ul>
            </div>
            </form>
    </div>
</template>
<script>
    import userServices from "../services/userServices.js";
    export default {
        name: "user",
        data() {
            return {
                numbers: [],
                currentUser: null,
                number: "",
                Broj: ""
            };
        },
        methods: {
            getUser(id) {
                userServices.get(id)
                .then(response => {
                    this.currentUser = response.data;
                    console.log(response.data);
                })
                .catch(e => {
                    console.log(e);
                });
            },
            retrieveNumbers(id) {
                userServices.getNumber(id).then(response => {
                    this.numbers = response.data;
                    console.log(response.data);
                })
                .catch(e => {
                    console.log(e);
                });
            }
        },
        created() {
            this.getUser(this.$route.params.id);
            this.retrieveNumbers(this.$route.params.id);
        }
    };
</script>
<style>
    .edit-form {
        max.width: 300px;
        margin: auto;
    }
</style>

So I have this problem with displaying phone numbers for user. Console output is displaying numbers, and my user interface is displaying the right amount of rows but not numbers themselves.

I'm trying to find the mistake I made in my code, but I got stuck.

Please help. Thank you. And please, no no-answers :)

Answer 1

try to use async await for your calls. also be sure that ur id for retrieveNumbers(id) is set correct and the api is responding with a payload.

<script>
    import userServices from "../services/userServices.js";
    export default {
        name: "user",
        data() {
            return {
                numbers: [],
                currentUser: null,
                number: "",
                Broj: ""
            };
        },
        methods: {
            async getUser(id) {
                await userServices.get(id)
                .then(response => {
                    this.currentUser = response.data;
                    console.log(response.data);
                })
                .catch(e => {
                    console.log(e);
                });
            },
            async retrieveNumbers(id) {
                await userServices.getNumber(id).then(response => {
                    this.numbers = response.data;
                    console.log(response.data);
                })
                .catch(e => {
                    console.log(e);
                });
            }
        },
        async created() {
           await this.getUser(this.$route.params.id);
            await this.retrieveNumbers(this.$route.params.id);
        }
    };
</script>
READ ALSO
Find similar news on SQL based on similar tags

Find similar news on SQL based on similar tags

I have a list of news from a few newspapers(Getting them from a RSS feed)Let's say every newspaper returns a list of news with tags

134
Update data only if user change anything in laravel

Update data only if user change anything in laravel

Update data only if the user changes anything otherwise return a message that nothing to updateAfter click the edit button, if the user hits update button without change anything then return message nothing to update

137
How to make webpack ignore a require to a mising file in a npm module?

How to make webpack ignore a require to a mising file in a npm module?

When bundling my project with webpack, I encountered an error message indicating that anode file required in one of my npm package does not exist

122