Vue - Component for Colour Selection

One Solution to passing data to component by reference.

by Ben Clayton

HTML

<script src="https://unpkg.com/vue"></script>
<div id="div1">
  Outer: {{ obj.colour }}<br/>
  <colour-selector :refobj="obj" prop="colour"></colour-selector>
</div>

JavaScript

Vue.component('colour-selector', {
  props: ["refobj", "prop"],
	data: function(){
		return { colours : ["red","green","blue"] }
	},
  template: '<select v-model="refobj[prop]"><option v-for="c in colours">{{ c  }}</option>'
})

var vm1 = new Vue({
  el: '#div1',
  data: {
    obj: { colour: "green" }
  }
});