JSFiddle - React, Tailwind, and code Playground

by Luqman Rom

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<div id="items">
  <item v-for="data in items" :item-data="data"></item>
</div>

JavaScript

var items = [
    { number:1, text:'one' },
    { number:2, text:'two' }
];
    
var vue = new Vue({
    el: '#items',
    data: { items: items },
    components: {
        item: {
            props: ['itemData'],
            template: '<p><button v-disabled="isItemDisabled">{{fulltext}}</botton></p>',
            computed: {
                isItemDisabled: function() {
                    return this.itemData.number > 1;
                },
                fulltext: function() {
                    return 'item ' + this.itemData.text;
                }
            },
            directives: {
                'disabled': {
                    inserted: function (el, binding) {
                        el.disabled = !!binding.value
                    }
                }
            }
        }
    }
});