How can I access Vue JS props in a method in a component?

Question

I may be wrong in my understanding of props but I can't seem to be able to pass a prop to a component and then use the value in a method?

So far I am able to get data from a fixed API and output everything from the vue component, now I would like the api source to be dependent on the variable passed to the component.

My blade template:

<projectstatuses :userslug="this-user" :projectslug="this-project"></projectstatuses>

Then in my Vue Component:

export default {
  props: {
      userslug: {
            type: String,
            default: "other-user",
        },
      projectslug: {
            type: String,
            default: "other-project",
        }
    },
    data() {
        return {
            statuses : [],
        }
    },
    created(){
        this.getStatuses();
    },
    methods : {
        getStatuses(){
        console.log(this.userslug);
        console.log(this.projectslug);
            axios.get('/api/' + this.userslug + '/' + this.projectslug)
                .then((response) => {
                    let statuses = response.data;
                    this.statuses = statuses.statuses;
                    console.log(response.data.statuses);
                })
                .catch(
                    (response) => {
                        console.log('error');
                        console.log(response.data);
                    }
                );
        }
    }
}

In the console I get the default values, if I remove the default values I get undefined. I have tried removing the api method and simply console logging the values but I still get undefined. Is what I'm trying to do possible or have I completely misunderstood how props work?

Are you getting this-data and this-project values from API in your parent component/blade ? If yes, there could be maybe an issue that component is rendered before the data is fetched from API, and then those values are sending undefined value. — Belmin Bedak

ABDEL-RHMAN ABDEL-RHMAN · Accepted Answer · 2017-01-20T11:56:20

You are trying to bind this-user and this-project as a properties not as values ,

So you will need to define them in the data object in the parent,

but if you want to pass this-user and this-project just as value remove the : try that:

<projectstatuses userslug="this-user" projectslug="this-project"></projectstatuses>

Dynamic-Props

How can I access Vue JS props in a method in a component?

2 Answers