Vue - Component for Colour Selection

Second Solution to passing data to component by passing reference to data and property name.

by Ben Clayton

HTML

<script src="https://unpkg.com/vue"></script>
<div id="div1">
  Colour: {{ colour }}<br/>
  BkColour: {{ bkcolour }}<br/><br/>
  Colour: <colour-selector :param="getPropByRef('colour')" ></colour-selector><br/>
	BkColour: <colour-selector :param="getPropByRef('bkcolour')" ></colour-selector><br/>
</div>

JavaScript

// You alter the parent view property by using 'param.ref[param.prop]'
Vue.component('colour-selector', {
  props: ["param"],
	data: function(){
		return { colours : ["red","green","blue"] }
	},
  template: '<select v-model="param.ref[param.prop]"><option v-for="c in colours">{{ c  }}</option>'
})

var vm1 = new Vue({
  el: '#div1',
  data: {
    colour: "green",
		bkcolour: "red"
  },
	methods :{
		getPropByRef: function( nm ){
			return { ref: this, prop: nm }
		}
	}
});