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>

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

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

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

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

因此应该输出我通过道具传递的文件名，但当前不输出任何内容。我曾经有过这项工作，但我使用的是路线参数，但想将其切换为道具。

我感觉可能是在正确设置fileName之前加载了barchart组件吗？

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

谢谢

Answer 1

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

通过道具的数据未显示

1 个答案: