Question

所以我试图创建一个VueJS应用程序，并且给了一组可以通过.json端点检索的JSON对象。

我打电话给他们People。因此，在使用VueResource之后，我在this.people中获得了一组人员。

我能够迭代并获得所有显示在侧面的名称，但是，由于它不是API，也没有唯一ID减去它们的数组索引，我在尝试缩小每个对象并创建一个单Person个查看页面。

因此，如果这是一个正常的api，我可以做{＆＃39; /people/:id＆＃39;但我无法做到。我还想知道我是否正确存储了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端点

1 个答案: