# [Vue.js] Data via prop not being displayed

there is managed to get myself slightly confused. there is an app where I can display all user profiles, this component is called all-profiles. An example of this page is

<tr v-for=”profile in profiles.data” :key=”profile.id”>
<td>{ profile.id }</td>
<td>{ profile.user.name }</td>
<td>{ profile.created_at }</td>
<td>
<router-link :to=”{ name: user-profile, params: {
id: profile.id }” tag=”a” exact> View Profile
</td>
</tr>

So nothing fancy here, just a simple loop. When you click on the router-link for a specific profile, it takes you to that page, a component called user-profile. I pass the profile id as a parameter.

So in the user-profile component, I display information about that profile. Most of the work is done in the created function

created() {
let vm = this;

let url = /api/profile/${this.$route.params.id};
axios.get(url)
.then(response => {
this.profile = response.data;
this.fileName = response.data.file_path;
return d3.json(response.data.file_path);
}).then(data => {
//display some data
}).catch(err => {
//log error
});
}

So I firstly make an axios call to pull information about that profile. Each profile has a file_path which contains some processed data, in JSON form. I load this using d3 and display the data. This also works fine, no issues here. The issue is on this page however, within the template tags, I load another component which needs the file_path in order to display some data
within the file in the form of a chart. So there is

<barchart :file-name = this.fileName></barchart>

Now if I output fileName within the user-profile page, I can see it is correct. Now in the barchart component, there is the prop

props: {
fileName: {
type: String,
required: true
}
}

And then in the created function, I have

created() {
console.log(this.fileName);
}

So that should output the fileName when passing via the prop, but it currently outputs nothing. I used to have this working, but I was using route parameters, and wanted to switch things to props instead.

there is a feeling that maybe the barchart component is loaded before the fileName is properly set?

when not sure, is there anything obvious that might cause nothing to get outputted?

Thanks

### Solution :

Is it just as simple as: you are using “:filename = this.filename” in the template? The ‘this’ seems to be out of place?