[Vuejs]-VueJS and a static JSON endpoint without IDs

by

0👍

✅

I put together a quick example of how this might work with the Star Wars 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")
      })
  }
});

Here is the working example.

👤Bert

Leave a comment