JSFiddle - React, Tailwind, and code Playground

by svierkant

HTML

<script src="https://vuejs.org/js/vue.js"></script>
<button id="load">
Reload with url 2
</button>

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

JavaScript

var urls = [
'//api.jsonbin.io/b/5a89761da121bc097fe6c596/2',
'//api.jsonbin.io/b/5a8975c7a6718509746911cc/1'
]

var id = 0;

var example1 = new Vue({
  el: '#example-1',
  created () {
    console.info('created')
    this.fetchData(id)
  },
  methods: {
    fetchData (id) {
      let request = new Request(urls[id], {
        method: 'GET',
        headers: {
          'secret-key': '$2a$10$azC/25GiHYgUzmunfXy.ROOttIUht8izw3cJ2vLqMvUHszWtHFc2O'
        }
      })
      fetch(request, {credentials: 'same-origin'})
        .then(r => r.json())
        .then(items => {
        this.items = items
      })
    }
  },
  data: {
    items: []
  }
})

var button = document.getElementById("load");

button.onclick = function() {
	example1.fetchData(1);
}