使用vue-router將API中的表格資料進行超連結化
P粉951914381
P粉951914381 2024-03-30 14:06:41
0
1
471

我正在從 API (https://restcountries.com/) 獲取並顯示數據,但我無法使用 router-link 標記將每個表條目超連結到自己的頁面。什麼也沒發生,沒有錯誤,沒有連結文字。

<template>
    <div>
        <b-table responsive head-variant="dark" striped hover :items="countries" :fields="headings">
            <template #cell(name)="data">
                <router-link :to="{name: 'country', params: {country: country.name.official}}">
                    {{ data.value }}
                </router-link>
            </template>
        </b-table>
    </div>
</template>

<script>
import axios from '@/config'

export default {
    name: 'AllCountries',
    components: {},
    data() {
        return {
            headings: [
                {
                    key: 'name.common',
                    sortable: true
                },
                {
                    key: 'capital',
                    sortable: true
                },
            ],
            countries: []
        }
    },
    mounted() {
        axios.get('/all')
        .then(response => {
            console.log(response.data)
            this.countries = response.data
        })
        .catch(error => console.log(error))
    }
}
</script>

如果我從鍵“名稱”中刪除 .common,router-link 可以工作,但它將顯示國家/地區名稱的所有變體,而不僅僅是我想要的一個“通用”名稱。此外,如果刪除 .common,路由器連結將無法運作,如下所示:

“類型錯誤:無法讀取未定義的屬性(讀取“名稱”)” 「屬性或方法「國家」未在實例上定義,而是在渲染期間引用。」

雖然我在其他地方沒有使用這個確切的路由器連結得到這些錯誤,並且這些文件中沒有定義「名稱」),但我獲得路由器連結連結的唯一方法是使用這些參數: { id: data.item._id }(儘管它沒有連結到任何內容(它嘗試連結到'/undefined?fullText=true'))

P粉951914381
P粉951914381

全部回覆(1)
P粉957661544

路由器連結的參數應該是 params: {country: data.item.name.official }}

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!