madeindjs/api_consumer.html

## api_consumer.html
<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="utf-8">
  <title>TODO front-end</title>
</head>

<body>
  <div id="app">

    <table>

      <tr>
        <th>id</th>
        <th>title</th>
        <th>user</th>
        <th>completed</th>
      </tr>

      <tr v-for="todo in todos">
        <td>{{ todo.id }}</td>
        <td>{{ todo.title }}</td>
        <td>
          <button type="button" @click="showUser(todo.userId)">
            {{ todo.userId }}
          </button>
        </td>
        <td>{{ todo.completed }}</td>
      </tr>

    </table>

    <button v-on:click="loadTodos">Load todos</button>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script type="text/javascript">
    var app = new Vue({
      el: '#app',
      data: {
        todos: [],
      },
      methods: {
        loadTodos: function() {
          fetch('https://jsonplaceholder.typicode.com/todos/')
            .then(response => response.json())
            .then(json => {
              this.todos = json;
            })
        },
        showUser: function(userId) {
          fetch('https://jsonplaceholder.typicode.com/users/' + userId)
            .then(response => response.json())
            .then(json => alert(json.email) )
        }
      }
    })
  </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="fr">

	<head>
	<meta charset="utf-8">
	<title>TODO front-end</title>
	</head>

	<body>
	<div id="app">

	<table>

	<tr>
	<th>id</th>
	<th>title</th>
	<th>user</th>
	<th>completed</th>
	</tr>

	<tr v-for="todo in todos">
	<td>{{ todo.id }}</td>
	<td>{{ todo.title }}</td>
	<td>
	<button type="button" @click="showUser(todo.userId)">
	{{ todo.userId }}
	</button>
	</td>
	<td>{{ todo.completed }}</td>
	</tr>

	</table>

	<button v-on:click="loadTodos">Load todos</button>

	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
	var app = new Vue({
	el: '#app',
	data: {
	todos: [],
	},
	methods: {
	loadTodos: function() {
	fetch('https://jsonplaceholder.typicode.com/todos/')
	.then(response => response.json())
	.then(json => {
	this.todos = json;
	})
	},
	showUser: function(userId) {
	fetch('https://jsonplaceholder.typicode.com/users/' + userId)
	.then(response => response.json())
	.then(json => alert(json.email) )
	}
	}
	})
	</script>
	</body>

	</html>