VueJS和一個沒有ID的靜態JSON端點

Question

所以我試圖創建一個VueJS應用程序，並且我得到了一組通過.json端點可檢索的JSON對象。

我會打電話給他們People。所以在使用VueResource之後，我得到了一批this.people中的人。

我能夠迭代並獲得所有名稱顯示在一邊，但是，因爲它不是一個API也沒有唯一的ID減去他們的數組索引，我無法試圖縮小每個對象，並創建一個單一的Person查看頁面。

因此，如果這是一個正常的API，我可以做'/people/:id'，但我不能。我也想知道我是否可以正確存儲Prop/Component。

Answer 1

我整理了一個關於這個如何與星球大戰API一起工作的簡單例子。

const Loading = { 
    template: `<h1>Loading...</h1>` 
}; 

const People = { 
    props: ["people"], 
    template: ` 
    <div> 
     <h1>People</h1> 
     <ul> 
     <li v-for="person in people"> 
      <router-link :to='{name: "person", params:{person: person}}'>{{person.name}}</router-link> 
     </li> 
     </ul> 
    </div> 
    ` 
}; 

const PersonDetails = { 
    props: ["person"], 
    template: ` 
    <div> 
     <h1>{{person.name}}</h1> 
     <div>Height: {{person.height}}</div> 
     <div>Mass: {{person.mass}}</div> 
     <div>Hair Color: {{person.hair_color}}</div> 
     <br/> 
     <router-link to="people">Back to people</router-link> 
    </div> 
    ` 
}; 

const routes = [ 
    { path:"/", component: Loading}, 
    { path: "/people", name: "people", component: People}, 
    { path: "/person", name: "person", component: PersonDetails, props: true}, 
] 

const router = new VueRouter({ 
    routes 
}) 

new Vue({ 
    el: "#app", 
    router, 
    data:{ 
    people:[] 
    }, 
    mounted(){ 
    this.$axios.get("https://swapi.co/api/people/") 
     .then((response) => { 
     this.people = response.data.results 
     this.$router.push("people") 
     }) 
    } 
}); 

這裏是工作example。