我怎样才能显示选择的ID在vuejs的元素吗？

Question

我有一个名为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页，其中i显示数据

<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"
        },
}

请我如何可以显示标识的元素，我从路由器点击

Answer 1

我可以看到你正在传递中的id路线，你可以使用id = this.$route.params.id检索，并将其存储在临时variable.And中创建只是在之后的参数传递ID和改变你的查询accordingly.Or的另一种选择是检索数据遍历通过您检索到的数据，并从所选择的ID过滤。或者更确切地说，然后过滤创建数据对象ID - >值对通过ID直接访问他们，你将不得不作出一个API调用。