通过道具的数据未显示

Question

我设法让自己有点困惑。我有一个可以显示所有用户配置文件的应用程序，该组件称为所有配置文件。这个页面的一个例子是

<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
        </router-link>
    </td>
</tr>

所以这里没什么特别的，只是一个简单的循环。当您单击特定配置文件的router-link 时，它会将您带到该页面，这是一个称为用户配置文件的组件。我将配置文件 ID 作为参数传递。

因此，在用户配置文件组件中，我显示了有关该配置文件的信息。大部分工作都是在创建的函数中完成的

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

所以我首先进行 axios 调用以获取有关该配置文件的信息。每个配置文件都有一个 file_path，其中包含一些以 JSON 形式处理的数据。我使用 d3 加载它并显示数据。这也很好用，这里没有问题。问题出在此页面上，但是，在模板标签中，我加载了另一个需要 file_path 的组件以显示一些数据 以图表的形式在文件中。所以我有

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

现在，如果我在用户配置文件页面中输出文件名，我可以看到它是正确的。现在在条形图组件中，我有道具

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

然后在创建的函数中，我有

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

所以应该输出我通过道具传递的文件名，但它目前什么都不输出。我曾经有这个工作，但我正在使用路由参数，并想将东西切换到道具。

我感觉可能是在正确设置文件名之前加载了条形图组件？

我不确定，有没有什么明显的东西可能导致什么都没有输出？

谢谢

Answer 1

是否就这么简单：您在模板中使用“:filename = this.filename”？ “这个”似乎不合适？