JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.10.6/vue.js"></script>
JavaScript
var subComponent = Vue.extend({
template: "<input v-model='temperature.value' > {{temperature.changed}}",
data: {
temperature: {
value: 1,
changed: false
},
// -
loop: 0
// -
},
ready: function () {
var that = this;
// -
this.loop = 0;
// -
this.$watch('temperature.value', function () {
// -
if (that.loop > 10000) {
console.log('loop 1000');
alert(that.loop);
return;
}
that.loop++;
// -
that.temperature.changed = true;
});
}
});
var component = Vue.extend({
el: 'body',
template: "<div v-component='subComponent' v-with='temperature: temperature'></div>",
data: {
temperature: {
value: 1,
changed: false
}
},
components: {
subComponent: subComponent
}
});
var c = new component({
el: 'body',
data: {
temperature: {
value: 5,
changed: false
}
}
});