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。

VueJS 和一个没有 ID 的静态 JSON 端点

VueJS and a static JSON endpoint without IDs

json

endpoint

vue.js