title: Component Inheritance with vue js
body: <p>I am trying to build a base <code>DataComponent</code> which will contain the common functionality required for many other components which deal with basic CRUD entities.<br>
  So far I have  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//main.js
  import Vue from 'vue';
  
  new Vue({
    el:'#app',
    components:{
      DataComponent,
      Quotation
    }
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//data-component.js
  import Vue from 'vue';
  
  export
  default Vue.extend({
  
        data() {
            return {
              saved: false
            }
          },
  
          methods: {
  
            //This method will be used by all inheriting components to alert
            //the user regarding any changes which need to be saved.
            
            alertSave(entity, fields, intFields) {
                var changeCount = 0;
                fields.forEach(function(field) {
                  
                  var compareWith = this[field];
                  
                  //Here "this" need to refer to the child instance but it does not
                  //how can I achieve?
                  
                  if ((compareWith || entity[field.camelToSnake()]) &amp;&amp;
                    entity[field.camelToSnake()] !== compareWith) {
                    changeCount++;
                  }
                });
                intFields.forEach(function(field) {
                  var compareWith = parseInt(this[field]);
                  if ((compareWith || entity[field.camelToSnake()]) &amp;&amp;
                    entity[field.camelToSnake()] !== compareWith) {
                    changeCount++;
                  }
                });
                vm.saved = changeCount &lt;= 0;
              },
            
              //sanitizeValue method works as intended as it does not have any reference to "this"
            
              sanitizeValue(value) {
                if (value) {
                  return String(value).trim();
                } else {
                  return null;
                }
              },
            
              //In getDbData method also this needs to refer to the inheriting child instance
              //from where this method is called - how can I achieve it?
            
              getDbData(entity) {
                if (entity) {
                  this.dbTextFields.forEach(function(field) {
                    this[field] = entity[field.camelToSnake()];
                  });
                  this.dbIntFields.forEach(function(field) {
                    this[field] = entity[field.camelToSnake()];
                  });
                  this.dbObjFields.forEach(function(field) {
                    this[field] = entity[field.camelToSnake()];
                  });
                  this.dbAppendedFields.forEach(function(field) {
                    this[field] = entity[field.camelToSnake()]
                  });
                  this.saved = true;
  
                }
              }
          });</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//quotation.js
  
  import DataComponent from './data-component';
  
  export default DataComponent.extend({
    
    data(){
      return{
        id:0,
        date:'',
        remarks:'',
        terms:'',
        quote:{},
        dbTextFields:['to', 'org', 'address', 'items', 'description', 'quoted_by'],
        dbIntFields:['quote_ref', 'quantity', 'amount', 'discount', 'total'],
        dbObjFields:['inquiry', 'booking']
      }
    },
    
    methods:{
      setDbData(){
        let entity = this.quote;
        this.getDbData(entity);
        
        //getDbData gives error as "this" in getDbData does not refer to this
        // child component and so this.dbTextFields becomes undefined.
        
      }
    }
    
  });</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>How to achieve method inheritance as I am trying to do? Is it possible in Vue.js?  
  </code></pre>
  
  <p><strong>Edit</strong>  </p>
  
  <p>If I change the signature of the method in data-component.js as under, passing the instance of inheriting component ("this") as vm , it works </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//data-component.js
  import Vue from 'vue';
  
  export
  default Vue.extend({
  
        data() {
            return {
              saved: false
            }
          },
  
          methods: {
  
            //This method will be used by all inheriting components to alert
            //the user regarding any changes which need to be saved.
            
            alertSave(entity, fields, intFields, vm) {
                var changeCount = 0;
                fields.forEach(function(field) {
                  //var compareWith = this[field];
                  var compareWith = vm[field];
                  
                  //Changed "this" to vm (passed as a parameter) 
                  //how can I achieve?
                  
                  if ((compareWith || entity[field.camelToSnake()]) &amp;&amp;
                    entity[field.camelToSnake()] !== compareWith) {
                    changeCount++;
                  }
                });
                intFields.forEach(function(field) {
                  //var compareWith = parseInt(this[field]);
                  var compareWith = parseInt(vm[field]);
                  if ((compareWith || entity[field.camelToSnake()]) &amp;&amp;
                    entity[field.camelToSnake()] !== compareWith) {
                    changeCount++;
                  }
                });
                vm.saved = changeCount &lt;= 0;
              },
            
              //sanitizeValue method works as intended as it does not have any reference to "this"
            
              sanitizeValue(value) {
                if (value) {
                  return String(value).trim();
                } else {
                  return null;
                }
              },
            
              //In getDbData method also this needs to refer to the inheriting child instance
              //from where this method is called - how can I achieve it?
            
              getDbData(entity, vm) { //instance as "vm" parameter
              //change all this to vm
                if (entity) {
                  vm.dbTextFields.forEach(function(field) {
                    vm[field] = entity[field.camelToSnake()];
                  });
                  vm.dbIntFields.forEach(function(field) {
                    vm[field] = entity[field.camelToSnake()];
                  });
                  vm.dbObjFields.forEach(function(field) {
                    vm[field] = entity[field.camelToSnake()];
                  });
                  vm.dbAppendedFields.forEach(function(field) {
                    vm[field] = entity[field.camelToSnake()]
                  });
                  vm.saved = true;
  
                }
              }
          });</code></pre>
  </div>
  </div>
      </p>
  
  <p>And then in the inheriting component  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//quotation.js
  
  import DataComponent from './data-component';
  
  export default DataComponent.extend({
    
    data(){
      return{
        id:0,
        date:'',
        remarks:'',
        terms:'',
        quote:{},
        dbTextFields:['to', 'org', 'address', 'items', 'description', 'quoted_by'],
        dbIntFields:['quote_ref', 'quantity', 'amount', 'discount', 'total'],
        dbObjFields:['inquiry', 'booking']
      }
    },
    
    methods:{
      setDbData(){
        let entity = this.quote;
        this.getDbData(entity, this);
        
        //passing this (instance) as a parameter
        
        
      }
    }
    
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Passing the instance ("this") to the methods as vm, it works as expected.  </p>
  
  <p>I am not sure if this is the best way to do it. But then it surely is not inheritance.<br>
  How to use inheritance to achieve what I am trying to do?</p>