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页面

<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的元素

Answer 1

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

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

1 个答案: