JSFiddle - React, Tailwind, and code Playground

by alekzonder

HTML

<script src="https://cdn.rawgit.com/yyx990803/vue/0.11.0-rc/dist/vue.js"></script>
<div id="not_work"></div>
<div id="work"></div>

CSS

div {
    width: 50px;
    height: 50px;
    border: solid 1px gray;
    margin-bottom: 5px;
}

JavaScript

// update not work
new Vue({
    el: '#not_work',
    template: '{{test}}  <button v-on="click: update">click</button>',
    events: {
        'hook:created': function() {
           this.test = true;   
        }
    },
    methods: {
        update: function() {
             this.test = false;   
        }
    }
});


// update working
new Vue({
    el: '#work',
    template: '{{test}} <button v-on="click: update">click</button>',
    events: {
        'hook:created': function() {
           this.$set('test', true);   
        }
    },
    methods: {
        update: function() {
             this.test = false;   
        }
    }
});