@jiffylive/vue-j-editable/src/utils/sample-classes.js

Edit in place with validation for Vue

/***

Sample data used for demo and testing

***/

"use strict";

 class TheItem {
  // Used as a sample object to show the properties being mutated directly via properties

  constructor(app) {
    this.app = app;
    this.properties = ["name", "email", "salary", "url", "numKids", "role", "dateBirth"];
    this.setInitialValues();
  }

  setInitialValues() {
    this.name = "John Smith";
    this.email = "john@smith.com";
    this.salary = null;
    this.url = null;
    this.numKids = null;
    this.role = null;
    this.dateBirth = null;
  }

  toJSON() {
    let newArr = {}
    for (let prop in this.properties) newArr[this.properties[prop]] = this[this.properties[prop]];
    // console.log ('newArr: ' + JSON.stringify(newArr));
    return newArr;
  }

  setLiveValue(field, value) {
    console.log ('Live update: ' + field + ' = ' + value);
    this.app.lastItemLiveUpdate = 'Last update: ' + field + ' to: ' + value;
  }
}
// export default TheItem;
module.exports.TheItem = TheItem;

class TheItemGetSet extends TheItem {
  // Used as a sample object to show the properties being mutated by methods

  constructor(app) {
    super(app);
  }

  toJSON() {
    return this.values;
  }

  setInitialValues() {
    // Properties must be predefined to be reactive (change, eg using $set?)
    this.values = {"name": "Ben Smith", "email": "ben@fg.com", "salary": null, "url": null, "numKids": null, "role": null, "dateBirth": null};
  }

  getValue(key) {
    return this.values[key];
  }

  setValue(key, value) {
    console.log ('setValue Key: ' + key + ' value: ' + value);
    return this.values[key] = value;
  }

  setLiveValue(field, value) {
    console.log ('Live update: ' + field + ' = ' + value);
    this.app.lastItemGetSetLiveUpdate = 'Last update: ' + field + ' to: ' + value;
  }

}
module.exports.TheItemGetSet = TheItemGetSet;