Vue - watch / methods examples

by Ben Clayton

HTML

<div id="demo">
	<input v-model="firstName"><br/>
	<input v-model="lastName"><br/>
	<input v-model="sep.text"><br/>
	<input type="range" min=1 max=5 v-model="sep.qty"><br/>
	<input v-model="fullName"><br/>
</div>

JavaScript

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: '',
		seperator:'',
		sep:{text:'=',qty:1}
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + this.seperator + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + this.seperator + val
    },
    "sep.text": function (val) {
			this.makesep(this.sep.qty,val);
      this.fullName = this.firstName + this.seperator + this.lastName
    },
    "sep.qty": function (val) {
      this.makesep(val,this.sep.text);
			this.fullName = this.firstName + this.seperator + this.lastName
    }
		
  },
	methods:{
		makesep:function(q,t){
			var s='';
			for(var x=0;x < q;x++){
				s += t;
			}
			this.seperator=s;
		}
	
	}
})