JSFiddle - React, Tailwind, and code Playground

by leopoldthecuber

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0-rc.4/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<div id="app"></div>

JavaScript

Vue.component('outer', {
  template: `
    <div><slot></slot></div>
  `
});

Vue.component('inner', {
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  },
  template: `
    <p>{{ disabled }}<p>
  `
});

var App = Vue.extend();

new App({
  el: '#app',
  data() {
    return {
      options: [{
        disabled: false
      }, {
        disabled: false
      }, {
        disabled: false
      }]
    }
  },
  mounted() {
    setTimeout(() => {
      this.options[0].disabled = true;
    }, 2000);
  },
  template: `
    <outer>
      <inner v-for="option in options" :disabled="option.disabled"></inner>
    </outer>
  `
})