<div id="app">
  <main>

    <fieldset>
      <span v-for="option in options">
        <input @change.native="changeConsole" v-model="selected" :id="option.value" :key="option.value" :value="option.value" type="radio" name="promisetype">
        <label for="option.value"> {{option.value}}</label><br>
      </span>
    </fieldset>

    <component v-if="selected" :is="selected"></component>
    
  </main>
</div>

<script type="text/x-template" id="pending">
<section>
  <h2>Check the console!</h2>
  <p>This one is the same as the fulfilled option, but we're logging the promise when we call it, which will show it in the pending state.</p>
	<pre><code class="language-javascript">
const getSomeTacos = new Promise((resolve, reject) => {
  console.log('Initial state: Excuse me can I have some 🌮s')

  resolve()
})
.then(() => {
  console.log('Order some 🌮s')
})
.then(() => {
  console.log('Here are your 🌮s')
})
.catch((err) => {
  console.error('Nope! No 🌮s for you.')
});

//logging this will show us the getSomeTacos promise in the pending state
console.log(getSomeTacos)
  </code></pre>
</section>
</script>

<script type="text/x-template" id="fulfilled">
<section>
  <h2>Check the console!</h2>
	<pre><code class="language-javascript">
const getSomeTacos = new Promise((resolve, reject) => {
  console.log("Initial state: Excuse me can I have some 🌮s");

  resolve();
})
  .then(() => {
    console.log("Order some 🌮s");
  })
  .then(() => {
    console.log("Here are your 🌮s");
  })
  .catch(err => {
    console.error("Nope! No 🌮s for you.");
  });
  </code></pre>
</section>
</script>

<script type="text/x-template" id="rejected">
<section>
  <h2>Check the console!</h2>
	<pre><code class="language-javascript">
const getSomeTacos = new Promise((resolve, reject) => {
  console.log("Initial state: Excuse me can I have some 🌮s");

  reject();
})
  .then(() => {
    console.log("Order some 🌮s");
  })
  .then(() => {
    console.log("Here are your 🌮s");
  })
  .catch(err => {
    console.error("Nope! No 🌮s for you.");
  });
  </code></pre>
</section>
</script>
body {
  background: #E9EFC9;
  color: #162028;
  font-family: 'Roboto Slab', sans-serif;
  font-size: 17px;
  line-height: 1.3;
}

main {
  padding: 30px;
}

.accent {
  color: #04AFB7;
}

fieldset {
  background: #d4d9bd;
  width: 400px;
}

pre {
  border-radius: 8px;
    padding: 0 40px;
    max-width: 800px;
    border: 1px solid #b4b8a1;
    background: #ecefdd;
    box-shadow: 1px 2px 2px inset #b4b8a1;
}
View Compiled
Vue.component("Pending", {
  template: "#pending",
  mounted() {
    console.log("\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n");
    const getSomeTacos = new Promise((resolve, reject) => {
      console.log("Initial state: Excuse me can I have some 🌮s");

      resolve();
    })
      .then(() => {
        console.log("Order some 🌮s");
      })
      .then(() => {
        console.log("Here are your 🌮s");
      })
      .catch(err => {
        console.error("Nope! No 🌮s for you.");
      });

    console.log(getSomeTacos);
  }
});

Vue.component("Fulfilled", {
  template: "#fulfilled",
  mounted() {
    console.log("\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n");
    const getSomeTacos = new Promise((resolve, reject) => {
      console.log("Initial state: Excuse me can I have some 🌮s");

      resolve();
    })
      .then(() => {
        console.log("Order some 🌮s");
      })
      .then(() => {
        console.log("Here are your 🌮s");
      })
      .catch(err => {
        console.error("Nope! No 🌮s for you.");
      });
  }
});

Vue.component("Rejected", {
  template: "#rejected",
  mounted() {
    console.log("\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n");
    const getSomeTacos = new Promise((resolve, reject) => {
      console.log("Initial state: Excuse me can I have some 🌮s");

      reject();
    })
      .then(() => {
        console.log("Order some 🌮s");
      })
      .then(() => {
        console.log("Here are your 🌮s");
      })
      .catch(err => {
        console.error("Nope! No 🌮s for you.");
      });
  }
});

new Vue({
  el: "#app",
  data() {
    return {
      selected: "",
      options: [
        { value: "Fulfilled" },
        { value: "Rejected" },
        { value: "Pending" }
      ]
    }
  },
  methods: {
    changeConsole() {
      if (!this.selected) return
      console.log("\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n");
      const getSomeTacos = new Promise((resolve, reject) => {
        console.log("Initial state: Excuse me can I have some 🌮s");

        if (this.selected === 'Rejected') {
          reject();
        } else {
          resolve();
        }

      })
        .then(() => {
          console.log("Order some 🌮s");
        })
        .then(() => {
          console.log("Here are your 🌮s");
        })
        .catch(err => {
          console.error("Nope! No 🌮s for you.");
        });

       if (this.selected === 'Pending') console.log(getSomeTacos)
    }
  }
});
View Compiled

External CSS

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/prism_copy.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/prism.min.js