Vue - Bind to Existing Elements

Binds and picks up exiting attributes

by Ben Clayton

HTML

<script src="//unpkg.com/vue"></script>
<div class="comment" style="color:red" data-id="1">

</div>

<div class="comment" style="color:green" data-id="2">

</div>

JavaScript

myclasses = [];

var comments = {
  "1": {"content": "Comment 1"},
  "2": {"content": "Comment 2"}
}

$('.comment').each(function () {
	//debugger;
  var $el = $(this);
  var id = $el.attr('data-id');
  var data = comments[id];
	data.css =  $el.css(["color"]);

  myclasses.push(new Vue({
    el: this,
    data: data,
    template: '<div v-bind:style="css" class="comment">{{ content }}</div>',
		methods:{
			setter:function(v){
				this.css.color="blue";
				this.content += " updated to blue";
			}
		},
		mounted:function(){
			setTimeout(this.setter,5000);
		}
  }));
})