Vue Pairing - Phat Huynh

by Sarah Godoshian

HTML

<div id="app">
  <h2>Display Posts for User</h2>
  <select @change="fetchUserPosts" v-model="selectedUserId">
     <option :value="null">Select a User</option>
     <option v-for="user in users" :value="user.id">
       {{ user.name }}
     </option>
  </select>
  {{ selectedUserId }}
  
  <div v-for="post in userPosts">
  
  
  <h3 > {{ post.title }} </h3>
  
  <p>
  
  </p>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

Vue

new Vue({
  el: "#app",
  data() {
  	return {
    	users: null,
      selectedUserId: null,
      userPosts: null,
    }
  },
  mounted() {
  	this.fetchUsers();
  },
  methods: {
    fetchUsers() {
    	return fetch('https://jsonplaceholder.typicode.com/users')
      	.then((response) => {
        	if (response.ok) {
          	return response.json();
          }
        })
        .then((json) => {
        	this.users = json;
        })
    },
    fetchUserPosts() {
    	// TODO: https://jsonplaceholder.typicode.com/posts?userId=1
      
      return fetch('https://jsonplaceholder.typicode.com/posts?userId='+this.selectedUserId)
      	.then((response) => {
        	if (response.ok) {
          	return response.json();
          }
        })
        .then((json) => {
        	this.userPosts = json;
        })
    }
  }
})