Knockout Conversion to VueJS

Running as VueJS code

by Ben Clayton

HTML

<!-- +=+=+=+=+=+=+=+=+=+=+=+=+=+=+ Form created by Flow PageEditor +=+=+=+=+=+=+=++=+=+=+=+=+=+=+= -->
	<div id="vue-target">
	  <v-form>
	    <v-system-message v-bind:control="system_message"></v-system-message>
	    <v-checkbox-wrapper v-bind:control="credit_problem"></v-checkbox-wrapper>
	    <v-textarea v-bind:control="credit_problem_details"></v-textarea>

	    <button v-on:click="btnSubmit">Send</button>

	  </v-form>
	</div>

CSS

.system-message {
  padding: 4px;
  background-color: #808080;
}

.myinvalid {
  border: 1px solid #FF8080;
}

.error-state {
  background-color: #FF8080;
}

JavaScript

//-------------------------------------------------------
var unique = 0;

Vue.component('v-form', {
  props: [],
  template: `
		<div name="form-1" id="form-1" class="infx-form form-1">
			<slot></slot>
		</div>`
})
//-------------------------------------------------------
class formSystemMessage {
  constructor() {
    this.error_state = false;
    this.message = '';
  }
  setMessage(s) {
    this.message = s;
  }
  setErrorMessage(s) {
    this.message = s;
    this.error_state = true;
  }
}

Vue.component('v-system-message', {
  props: ["control"],
  template: `
		<div v-if="show()" v-bind:class="{'error-state': control.error_state, 'system-message':true }">
			{{control.message}}
		</div>`,
  methods: {
    show: function() {
      return this.control.message != ''
    }
  }
})

//-------------------------------------------------------
class formCheckboxWrapper {
  constructor(config) {
    debugger;
    this.invalid = false;
    this.name = config.name;
    this.children = [];

    for (var i = 0; i < config.children.length; i++) {
      var cfg = config.children[i];
      var name = cfg.replace(/ /g, '_').toLowerCase();
      var label = cfg;
      var title = this.name + ' - ' + label;
      this.children.push(new formCheckbox(name, label, title));
    }

  }
}

Vue.component('v-checkbox-wrapper', {
  props: ["control"],
	data: function() {
    return {
      none: {}
    }
  },
  template: `
		<div v-bind:class="{myinvalid: control.invalid }">
			<v-checkbox v-for="child in control.children" v-bind:control="child" v-bind:key="child.name" ></v-checkbox>
			<v-checkbox v-bind:control="none" v-bind:key="none" ></v-checkbox>
		</div>`,
		watch: {
    // whenever None changes, this function will run
    "control.children.0.value": function(value) {
      console.log("None changed", value);
    }
		}
})

//-------------------------------------------------------
class formCheckbox {
  constructor(name, label, title, value) {
    this.value = value || false;
   ...