JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
<div id="vue">
<div v-for="comment in orderedComments">
{{comment.text}}
</div>
<input @keydown.enter="addComment({text:$event.target.value});$event.target.value = ''" placeholder="type and press enter">
</div>
JavaScript
var store = {
debug: true,
state: {
comments:[{text:'hello'},{text:'vue'},{text:'stuff'}]
},
addComment (newValue) {
this.state.comments.push(newValue);
}
}
vuvu = new Vue({
el: '#vue',
data:{
comments: store.state.comments
},
computed:{
orderedComments(){
console.log("computing values");
return _.orderBy(this.comments, 'text')
}
},
methods: {
addComment: function(comment){
console.log(comment);
store.addComment(comment);
}
}
})