Vue js - How to use props in data and methods

Question

I am new in vue js , I am passing data from parent component to child one using props and I can use it in child normally but I can't use it in data of child component

parent

<template>
    <div>
        <show-question :qdata="question" v-if="question"></show-question>
        <h1 v-if="!question"> some error </h1>
    </div>
</template>

<script>
import ShowQuestion from './ShowQuestion';

export default {
    created(){
        axios.get(`/api/question/${this.$route.params.slug}`)
        .then(res => {
            this.question = res.data.data
            })
    },

    data(){
        return {
            question : {},
        }
    },

    components:{
        ShowQuestion,
    },
}
</script>

child

<template>
    <v-container>
        <v-card>
            <div>
                <v-card-title class="blue--text"
                    >{{ data.title }}
                    <v-spacer></v-spacer>
                    <v-btn color="teal white--text">5 Replies</v-btn>
                </v-card-title>
                <v-card-subtitle
                    > {{data.uid}} {{ data.user }} said {{ data.created_at }}</v-card-subtitle
                >
            </div>
            <v-card-text>{{ data.body }}</v-card-text>

            <v-card-actions v-if="own">
                <v-btn icon text>
                    <v-icon color="orange">create</v-icon>
                </v-btn>

                <v-btn icon text>
                    <v-icon color="red">delete</v-icon>
                </v-btn>

            </v-card-actions>
        </v-card>
    </v-container>
</template>

<script>
export default {
    props: ['qdata'],
    data(){
        return {
            own: User.own(this.qdata.uid),
        };
    },
};
</script>

this.qdata.uid is always be undefined in console, although it supposed it have values and I can saw it from child template

enter image description here

yes I also checked it, but I know my mistake by helping from @Shoejep , child mounted early — Mohamed Magdy
– Mohamed Magdy, Commented May 15, 2020 at 20:37

Shoejep · Accepted Answer · 2020-05-15 15:22:20Z

1

Your show-questioncomponent is mounted early on because v-if="question" is true. When show-question is mounted, your api call hasn't had a chance to finish, so question is the same as the initial value {}, which is why uid is undefined.

I would change question : {} to question: null, then the child component will only be mounted when there's a question (after the api call).

answered May 15, 2020 at 15:22

Shoejep

4,8795 gold badges26 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sameh · Accepted Answer · 2020-05-15 16:08:08Z

0

This is simply because if you check the truthy of an object it will always return true even if the object is empty, which results in the component being rendered before the API call has finished.

Instead, you can check if it's empty or not by converting it to an array and check it's length value, i.e. Object.entries(question).length or simply use the lodash helper method: _isEmpty(question).

Also a quick side note: it's cleaner to use v-else after v-if when you want to render something or the other instead of explicitly negating the value in another v-if, though they're required to be direct siblings.

answered May 15, 2020 at 16:08

Sameh

7367 silver badges10 bronze badges

Collectives™ on Stack Overflow

Vue js - How to use props in data and methods

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related