如何在 vuejs 中显示所选 ID 的元素？答案

【问题标题】：How can i display the element of a selected Id in vuejs?如何在 vuejs 中显示所选 ID 的元素？
【发布时间】：2019-06-28 04:28:55
【问题描述】：

我有一个名为 Home.vue 的页面，我有一个路由器链接，一旦用户点击它，它就是 id，它会将他们带到页面，我如何显示点击的 id 的数据元素？

            <li class="ta-track-card column col-2 flex-column" v-for="faq in faqs">
                <div class="inner">
                    <div class="artwork" role="link">
                        <router-link :to="`/album/${faq.id}`"><span :style="`background-image: url('http://localhost/mymusic/${faq.artworkPath}');`"></span></router-link>
                    </div>
                        <div class="info">
                            <div class="title white-primary-hover"><router-link :to="`/album/${faq.id}`">{{ faq.title }}</router-link></div>
                            <div class="username light-white-hover">
                                <span>by </span>
                                <router-link :to="`/artist/${faq.artistId}`">{{ faq.artist }}</router-link>
                            </div>
                            <div class='released'>Released On {{ faq.albumdate }}</div>
                        </div>  
                </div>
            </li>

下面是我显示数据的 Album.vue 页面

<div class="entityInfo">

<div class="leftSection" v-for="faq in faqs">
    <img :src="/""faq.artworkPath">
</div>

<div class="rightSection" v-for="faq in faqs" :key="faq.id">
    <h2 class="_good">{{ faq.title }}</h2>
    <p class="_me">By {{ faq.artist }}</p>
    <p class="_me">1 songs</p>
    <p class="_me">{{ faq.albumdate }}</p>
</div>

以下是我使用的脚本：

<script>
    import axios from 'axios';

export default {
    name: 'album',

    data: () =>({
        faqs: [],
        songs: [],
        errors: []
    }),

    created() {
        axios.get('http://localhost/mymusic/rest/api/album/read')
        .then(response => {
            this.faqs = response.data.data;
        })
        .catch(e => {
            console.log(e),
            this.errors.push(e)
        })
    }
}


</script>

以下是示例 API：

{
    "data": [
        {
            "id": "41",
            "artistId": "38",
            "title": "Red Handed",
            "artist": "Peruzzi & Mayorkun",
            "artworkPath": "assets/images/artwork/red.jpg",
            "albumdate": "2018-09-24"
        },
        {
            "id": "40",
            "artistId": "37",
            "title": "FEFE (feat. Nicki Minaj & Murda Beatz)",
            "artist": "6ix9ine",
            "artworkPath": "assets/images/artwork/fefe.jpg",
            "albumdate": "2018-07-22"
        },
}

请问如何显示我从路由器点击的 Id 元素

【问题讨论】：

标签： php vue.js

【解决方案1】：

正如我所见，您在路由中传递了 id，您可以使用id = this.$route.params.id 检索它并将其存储在一个临时变量中。创建时只需通过在 post 参数中传递 id 并相应地更改您的查询来检索数据。或者另一种选择是遍历检索到的数据并从选定的 id 中过滤它们。或者更确切地说，过滤器将数据对象创建为 id->value 对以通过 id 直接访问它们，您将不得不进行单个 api 调用。

【讨论】：

我看不懂你写的东西，你能举个例子吗？