Vue - Correct Binding With Component

Shows binding to Object when working with Vue components

by Ben Clayton

HTML

<script src="https://unpkg.com/vue"></script>
<div id="interface">
<!-- :context is bound, property is just a passed in value -->
  Firstname: <my-input :context='$data' property='firstname'></my-input>
  Lastname: <my-input :context='$data' property='lastname'> </my-input>
  <div> {{firstname}} - {{lastname}} </div>
</div>

<template id="my-input-template">
  <input type="text" placeholder="Text" v-model="context[property]">
</template>

JavaScript

Vue.component('my-input', {
   props: ['context','property'],
   template: '#my-input-template',
   data: function() {
     return {}
   }
 });

 //---------------------------------------------------------
 new Vue({
   el: '#interface',
   data() {
     return {
       firstname: "Ben",
       lastname: "Clayton"
     }
   }
 });