<div id="app"></div>

#app {
  padding: 10px;
}

.btn + .btn {
  margin-left: 10px;
}

.alert {
  margin-top: 10px;
}

const Component = Vue.extend({
  template: `
    <div id="app">
      <button 
        v-for="n in 3" 
        :key="n" 
        :class="['btn', 'btn-default', { active: index === n }]"
        @click="switchTab(n)"
      >
        Tab {{ n }}
      </button>
      <div class="alert alert-success" v-text="message"/>
    </div>
  `,
  data() {
    return {
      index: 0,
      message: 'Select a tab',
    };
  },

  methods: {
    switchTab(index) {
      this.index = index;
      this.message = 'Loading...';
      this.loadLastContent(index)
        .then(message => { this.message = message; });
    },

    loadContent(index) {
      const DELAY = Math.floor(1000 + Math.random() * 3000);

      return new Promise((resolve) => {
        setTimeout(() => resolve(`Message #${index}`), 3000);
      });
    },
    
    loadLastContent(index) {
      const promise = this.loadContent(index);
      this.lastPromise = promise;

      return new Promise((resolve) => {
        promise.then((result) => {
          if (promise === this.lastPromise) {
            this.lastPromise = null;
            resolve(result);
          }
        });
      });
    }
  },
});

new Vue({
  el: '#app',
  render(h) {
    return h(Component);
  }
});