Skip to content

Instantly share code, notes, and snippets.

@hanxue

hanxue/PMI.vue

Last active February 22, 2018 19:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save hanxue/63eb5f03a4bd78df2111c9b64a625fcf to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save hanxue/63eb5f03a4bd78df2111c9b64a625fcf to your computer and use it in GitHub Desktop.
Download ZIP
Webpack 3 Vue.js error
Raw
app.js
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var accounting__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! accounting */ \"./node_modules/accounting/accounting.js\");\n/* harmony import */ var accounting__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(accounting__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var vuelidate__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vuelidate */ \"./node_modules/vuelidate/lib/index.js\");\n/* harmony import */ var vuelidate__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(vuelidate__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var vuelidate_lib_validators__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! vuelidate/lib/validators */ \"./node_modules/vuelidate/lib/validators/index.js\");\n/* harmony import */ var vuelidate_lib_validators__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(vuelidate_lib_validators__WEBPACK_IMPORTED_MODULE_2__);\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n name: 'PMI',\n mixins: [vuelidate__WEBPACK_IMPORTED_MODULE_1__[\"validationMixin\"]],\n data: function data() {\n return {\n menuVisible: false,\n ficoScores: ['760+', '740-759', '720-739', '700-719', '680-699', '660-679', '640-659', '620-639'],\n selectedFicoScore: '660-679',\n houseValue: accounting__WEBPACK_IMPORTED_MODULE_0___default.a.formatMoney(300000, '$', 0),\n loanAmount: accounting__WEBPACK_IMPORTED_MODULE_0___default.a.formatMoney(285000, '$', 0),\n basisPoints: 0,\n userSaved: false,\n sending: false,\n lastUser: null\n };\n },\n validations: {\n // form: {\n houseValue: {\n required: vuelidate_lib_validators__WEBPACK_IMPORTED_MODULE_2__[\"required\"],\n between: Object(vuelidate_lib_validators__WEBPACK_IMPORTED_MODULE_2__[\"between\"])(0, 100000000)\n },\n loanAmount: {\n required: vuelidate_lib_validators__WEBPACK_IMPORTED_MODULE_2__[\"required\"],\n between: Object(vuelidate_lib_validators__WEBPACK_IMPORTED_MODULE_2__[\"between\"])(0, 100000000),\n maxLength: Object(vuelidate_lib_validators__WEBPACK_IMPORTED_MODULE_2__[\"maxLength\"])(undefined.houseValue)\n },\n selectedFicoScore: {\n required: vuelidate_lib_validators__WEBPACK_IMPORTED_MODULE_2__[\"required\"]\n },\n email: {\n required: vuelidate_lib_validators__WEBPACK_IMPORTED_MODULE_2__[\"required\"],\n email: vuelidate_lib_validators__WEBPACK_IMPORTED_MODULE_2__[\"email\"]\n }\n // }\n },\n computed: {\n ltv: function ltv() {\n var ltv = (accounting__WEBPACK_IMPORTED_MODULE_0___default.a.unformat(this.loanAmount) / accounting__WEBPACK_IMPORTED_MODULE_0___default.a.unformat(this.houseValue) * 100).toFixed(2);\n\n switch (this.selectedFicoScore) {\n\n case '760+':\n if (ltv <= 85) this.basisPoints = .0019;else if (ltv >= 85.01 && ltv <= 90) this.basisPoints = .0030;else if (ltv >= 90.01 && ltv <= 95) this.basisPoints = .0041;else if (ltv >= 95.01 && ltv <= 97) this.basisPoints = .0055;\n break;\n\n case '740-759':\n if (ltv <= 85) this.basisPoints = .0020;else if (ltv >= 85.01 && ltv <= 90) this.basisPoints = .0041;else if (ltv >= 90.01 && ltv <= 95) this.basisPoints = .0059;else if (ltv >= 95.01 && ltv <= 97) this.basisPoints = .0075;\n break;\n\n case '720-739':\n if (ltv <= 85) this.basisPoints = .0023;else if (ltv >= 85.01 && ltv <= 90) this.basisPoints = .0050;else if (ltv >= 90.01 && ltv <= 95) this.basisPoints = .0073;else if (ltv >= 95.01 && ltv <= 97) this.basisPoints = .0095;\n break;\n\n case '700-719':\n if (ltv <= 85) this.basisPoints = .0027;else if (ltv >= 85.01 && ltv <= 90) this.basisPoints = .0060;else if (ltv >= 90.01 && ltv <= 95) this.basisPoints = .0087;else if (ltv >= 95.01 && ltv <= 97) this.basisPoints = .0115;\n break;\n\n case '680-699':\n if (ltv <= 85) this.basisPoints = .0032;else if (ltv >= 85.01 && ltv <= 90) this.basisPoints = .0073;else if (ltv >= 90.01 && ltv <= 95) this.basisPoints = .0108;else if (ltv >= 95.01 && ltv <= 97) this.basisPoints = .0140;\n break;\n\n case '660-979':\n if (ltv <= 85) this.basisPoints = .0041;else if (ltv >= 85.01 && ltv <= 90) this.basisPoints = .0100;else if (ltv >= 90.01 && ltv <= 95) this.basisPoints = .0142;else if (ltv >= 95.01 && ltv <= 97) this.basisPoints = .0190;\n break;\n\n case '640-659':\n if (ltv <= 85) this.basisPoints = .0043;else if (ltv >= 85.01 && ltv <= 90) this.basisPoints = .0105;else if (ltv >= 90.01 && ltv <= 95) this.basisPoints = .0150;else if (ltv >= 95.01 && ltv <= 97) this.basisPoints = .0205;\n break;\n\n case '620-639':\n if (ltv <= 85) this.basisPoints = .0045;else if (ltv >= 85.01 && ltv <= 90) this.basisPoints = .0110;else if (ltv >= 90.01 && ltv <= 95) this.basisPoints = .0161;else if (ltv >= 95.01 && ltv <= 97) this.basisPoints = .0225;\n break;\n\n }\n return ltv;\n },\n equityPercentage: function equityPercentage() {\n return (100 - this.ltv).toFixed(2);\n },\n equity: function equity() {\n return accounting__WEBPACK_IMPORTED_MODULE_0___default.a.formatMoney(accounting__WEBPACK_IMPORTED_MODULE_0___default.a.unformat(this.houseValue) - accounting__WEBPACK_IMPORTED_MODULE_0___default.a.unformat(this.loanAmount), '$', 0);\n },\n pmi: function pmi() {\n if (this.ltv <= 80) {\n return 0;\n } else {\n return accounting__WEBPACK_IMPORTED_MODULE_0___default.a.formatMoney(this.basisPoints * accounting__WEBPACK_IMPORTED_MODULE_0___default.a.unformat(this.loanAmount) / 12);\n }\n }\n },\n methods: {\n getValidationClass: function getValidationClass(fieldName) {\n var field = this.$v[fieldName];\n\n if (field) {\n return {\n 'md-invalid': field.$invalid && field.$dirty\n };\n }\n },\n clearForm: function clearForm() {\n this.$v.$reset();\n this.houseValue = null;\n this.loanAmount = null;\n this.selectedFicoScore = null;\n },\n saveUser: function saveUser() {\n var _this = this;\n\n this.sending = true;\n\n // Instead of this timeout, here you can call your API\n window.setTimeout(function () {\n _this.lastUser = _this.loanAmount + ' ' + _this.houseValue;\n _this.userSaved = true;\n _this.sending = false;\n _this.clearForm();\n }, 1500);\n },\n validateUser: function validateUser() {\n this.$v.$touch();\n\n if (!this.$v.$invalid) {\n this.saveUser();\n }\n }\n }\n});//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvYmFiZWwtbG9hZGVyL2xpYi9pbmRleC5qcyEuL25vZGVfbW9kdWxlcy92dWUtbG9hZGVyL2xpYi9zZWxlY3Rvci5qcz90eXBlPXNjcmlwdCZpbmRleD0wIS4vc3JjL2NvbXBvbmVudHMvUE1JLnZ1ZS5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy9QTUkudnVlPzdmZjgiXSwic291cmNlc0NvbnRlbnQiOlsiPHRlbXBsYXRlPlxuICAgICAgICA8Zm9ybSBub3ZhbGlkYXRlIGNsYXNzPVwibWQtbGF5b3V0LXJvdyBtZC1ndXR0ZXJcIiBAc3VibWl0LnByZXZlbnQ9XCJ2YWxpZGF0ZVVzZXJcIj5cbiAgICAgICAgICA8bWQtY2FyZCBjbGFzcz1cIm1kLWZsZXgtNTAgbWQtZmxleC1zbWFsbC0xMDBcIj5cbiAgICAgICAgICAgIDxtZC1jYXJkLWhlYWRlcj5cbiAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cIm1kLXRpdGxlXCI+UE1JIENhbGN1bGF0b3I8L2Rpdj5cbiAgICAgICAgICAgIDwvbWQtY2FyZC1oZWFkZXI+XG5cbiAgICAgICAgICAgIDxtZC1jYXJkLWNvbnRlbnQ+XG4gICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJtZC1sYXlvdXQtcm93IG1kLWxheW91dC13cmFwIG1kLWd1dHRlclwiPlxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJtZC1mbGV4IG1kLWZsZXgtc21hbGwtMTAwXCI+XG4gICAgICAgICAgICAgICAgICA8bWQtZmllbGQgOmNsYXNzPVwiZ2V0VmFsaWRhdGlvbkNsYXNzKCdob3VzZVZhbHVlJylcIj5cbiAgICAgICAgICAgICAgICAgICAgPGxhYmVsIGZvcj1cInB1cmNoYXNlLXByaWNlXCI+UHVyY2hhc2UgUHJpY2UvRXN0aW1hdGVkIFByb3BlcnR5IFZhbHVlPC9sYWJlbD5cbiAgICAgICAgICAgICAgICAgICAgPG1kLWlucHV0IG5hbWU9XCJwdXJjaGFzZS1wcmljZVwiIGlkPVwicHVyY2hhc2UtcHJpY2VcIiBhdXRvY29tcGxldGU9XCJnaXZlbi1uYW1lXCIgdi1tb2RlbD1cImhvdXNlVmFsdWVcIiA6ZGlzYWJsZWQ9XCJzZW5kaW5nXCIgLz5cbiAgICAgICAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJtZC1lcnJvclwiIHYtaWY9XCIhJHYuaG91c2VWYWx1ZS5yZXF1aXJlZFwiPlRoZSBwdXJjaGFzZSBwcmljZSBpcyByZXF1aXJlZDwvc3Bhbj5cbiAgICAgICAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJtZC1lcnJvclwiIHYtZWxzZS1pZj1cIiEkdi5ob3VzZVZhbHVlLmJldHdlZW5cIj5JbnZhbGlkIHB1cmNoYXNlIHByaWNlPC9zcGFuPlxuICAgICAgICAgICAgICAgICAgPC9tZC1maWVsZD5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJtZC1mbGV4IG1kLWZsZXgtc21hbGwtMTAwXCI+XG4gICAgICAgICAgICAgICAgICA8bWQtZmllbGQgOmNsYXNzPVwiZ2V0VmFsaWRhdGlvbkNsYXNzKCdsb2FuQW1vdW50JylcIj5cbiAgICAgICAgICAgICAgICAgICAgPGxhYmVsIGZvcj1cImxhc3QtbmFtZVwiPkxvYW4gQW1vdW50PC9sYWJlbD5cbiAgICAgICAgICAgICAgICAgICAgPG1kLWlucHV0IG5hbWU9XCJsYXN0LW5hbWVcIiBpZD1cImxvYW4tYW1vdW50XCIgYXV0b2NvbXBsZXRlPVwibG9hbi1hbW91bnRcIiB2LW1vZGVsPVwibG9hbkFtb3VudFwiIDpkaXNhYmxlZD1cInNlbmRpbmdcIiAvPlxuICAgICAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cIm1kLWVycm9yXCIgdi1pZj1cIiEkdi5sb2FuQW1vdW50LnJlcXVpcmVkXCI+VGhlIGxvYW4gYW1vdW50IGlzIHJlcXVpcmVkPC9zcGFuPlxuICAgICAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cIm1kLWVycm9yXCIgdi1lbHNlLWlmPVwiISR2LmxvYW5BbW91bnQuYmV0d2VlblwiPkludmFsaWQgbG9hbiBhbW91bnQ8L3NwYW4+XG4gICAgICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwibWQtZXJyb3JcIiB2LWVsc2UtaWY9XCIhJHYubG9hbkFtb3VudC5tYXhMZW5ndGhcIj5Mb2FuIGFtb3VudCBjYW5ub3QgYmUgbW9yZSB0aGFuIHB1cmNoYXNlIHByaWNlPC9zcGFuPlxuICAgICAgICAgICAgICAgICAgPC9tZC1maWVsZD5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cIm1kLWxheW91dC1yb3cgbWQtZ3V0dGVyIG1kLWxheW91dC13cmFwXCI+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cIm1kLWZsZXggbWQtZmxleC1zbWFsbC0xMDBcIj5cbiAgICAgICAgICAgICAgICAgIDxtZC1maWVsZCA6Y2xhc3M9XCJnZXRWYWxpZGF0aW9uQ2xhc3MoJ3NlbGVjdGVkRmljb1Njb3JlJylcIj5cbiAgICAgICAgICAgICAgICAgICAgPGxhYmVsIGZvcj1cImZpY28tc2NvcmVcIj5GaWNvIFNjb3JlPC9sYWJlbD5cbiAgICAgICAgICAgICAgICAgICAgPG1kLXNlbGVjdCB2LW1vZGVsPVwic2VsZWN0ZWRGaWNvU2NvcmVcIiBtZC1kZW5zZT5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxtZC1vcHRpb24gdi1mb3I9XCJzY29yZSBpbiBmaWNvU2NvcmVzXCIgOmtleT0nc2NvcmUnPnt7c2NvcmV9fTwvbWQtb3B0aW9uPlxuICAgICAgICAgICAgICAgICAgICA8L21kLXNlbGVjdD5cbiAgICAgICAgICAgICAgICAgICAgPCEtLSA8c2VsZWN0IGNsYXNzPVwiZm9ybS1jb250cm9sXCIgdi1tb2RlbD1cInNlbGVjdGVkRmljb1Njb3JlXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICA8b3B0aW9uIHYtZm9yPVwic2NvcmUgaW4gZmljb1Njb3Jlc1wiIDprZXk9J3Njb3JlJz57e3Njb3JlfX08L29wdGlvbj5cbiAgICAgICAgICAgICAgICAgICAgICA8L3NlbGVjdD4gLS0+XG4gICAgICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwibWQtZXJyb3JcIj5GSUNPIHNjb3JlIGlzIHJlcXVpcmVkPC9zcGFuPlxuICAgICAgICAgICAgICAgICAgPC9tZC1maWVsZD5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgICAgICAgICBZb3VyIExUViAoTG9hbiB0byBWYWx1ZSkgaXMgPHN0cm9uZz57e2x0dn19JTwvc3Ryb25nPiA8YnIgLz5cblxuICAgICAgICAgICAgICAgIFlvdSBoYXZlIDxzdHJvbmc+e3tlcXVpdHlQZXJjZW50YWdlfX0lPC9zdHJvbmc+IGVxdWl0eSB3aGljaCBpcyA8c3Ryb25nPnt7ZXF1aXR5fX08L3N0cm9uZz48YnIgLz5cblxuICAgICAgICAgICAgICAgIFNlbGVjdGVkIEZJQ08gc2NvcmUgaXMgPGI+e3tzZWxlY3RlZEZpY29TY29yZX19PC9iPiA8YnIgLz5cblxuICAgICAgICAgICAgICAgIDxzcGFuIHYtaWY9XCJsdHYgPiA4MFwiPlxuICAgICAgICAgICAgICAgICAgWW91ciB3aWxsIHBheSBhcHByb3hpbWF0bGV5IDxzdHJvbmc+e3twbWl9fTwvc3Ryb25nPiBpbiBQcml2YXRlIE1vcnRnYWdlIEluc3VyYW5jZSBwZXIgbW9udGguXG4gICAgICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgICAgICAgIDxzcGFuIHYtaWY9XCJsdHYgPCA4MFwiPlxuICAgICAgICAgICAgICAgICAgWUFZIG5vIFBNSSBmb3IgeW91IVxuICAgICAgICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICAgIDwvbWQtY2FyZC1jb250ZW50PlxuXG4gICAgICAgICAgICA8bWQtcHJvZ3Jlc3MtYmFyIG1kLW1vZGU9XCJpbmRldGVybWluYXRlXCIgdi1pZj1cInNlbmRpbmdcIiAvPlxuICAgICAgPC9tZC1jYXJkPlxuXG4gICAgICA8bWQtc25hY2tiYXIgOm1kLWFjdGl2ZS5zeW5jPVwidXNlclNhdmVkXCI+VGhlIHVzZXIge3sgbGFzdFVzZXIgfX0gd2FzIHNhdmVkIHdpdGggc3VjY2VzcyE8L21kLXNuYWNrYmFyPlxuICAgIDwvZm9ybT5cblxuPC90ZW1wbGF0ZT5cblxuPHNjcmlwdD5cbmltcG9ydCBhY2NvdW50aW5nIGZyb20gJ2FjY291bnRpbmcnXG5pbXBvcnQgeyB2YWxpZGF0aW9uTWl4aW4gfSBmcm9tICd2dWVsaWRhdGUnXG5pbXBvcnQge1xuICAgIHJlcXVpcmVkLFxuICAgIGVtYWlsLFxuICAgIG1pbkxlbmd0aCxcbiAgICBtYXhMZW5ndGgsXG4gICAgYmV0d2VlblxuICB9IGZyb20gJ3Z1ZWxpZGF0ZS9saWIvdmFsaWRhdG9ycydcblxuZXhwb3J0IGRlZmF1bHQge1xuICBuYW1lOiAnUE1JJyxcbiAgbWl4aW5zOiBbdmFsaWRhdGlvbk1peGluXSxcbiAgZGF0YTogKCkgPT4gKHtcbiAgICBtZW51VmlzaWJsZTogZmFsc2UsXG4gICAgZmljb1Njb3JlczogWyAnNzYwKycsICc3NDAtNzU5JywnNzIwLTczOScsICc3MDAtNzE5JywgJzY4MC02OTknLFxuICAgICAgICAgICAgICAnNjYwLTY3OScsICc2NDAtNjU5JywgJzYyMC02MzknXSxcbiAgICBzZWxlY3RlZEZpY29TY29yZTogJzY2MC02NzknLFxuICAgIGhvdXNlVmFsdWU6IGFjY291bnRpbmcuZm9ybWF0TW9uZXkoMzAwMDAwLCckJywgMCksXG4gICAgbG9hbkFtb3VudDogYWNjb3VudGluZy5mb3JtYXRNb25leSgyODUwMDAsJyQnLCAwKSxcbiAgICBiYXNpc1BvaW50czogMCxcbiAgICB1c2VyU2F2ZWQ6IGZhbHNlLFxuICAgIHNlbmRpbmc6IGZhbHNlLFxuICAgIGxhc3RVc2VyOiBudWxsLFxuICB9KSxcbiAgdmFsaWRhdGlvbnM6IHtcbiAgICAvLyBmb3JtOiB7XG4gICAgICBob3VzZVZhbHVlOiB7XG4gICAgICAgIHJlcXVpcmVkLFxuICAgICAgICBiZXR3ZWVuOiBiZXR3ZWVuKDAsIDEwMDAwMDAwMClcbiAgICAgIH0sXG4gICAgICBsb2FuQW1vdW50OiB7XG4gICAgICAgIHJlcXVpcmVkLFxuICAgICAgICBiZXR3ZWVuOiBiZXR3ZWVuKDAsIDEwMDAwMDAwMCksXG4gICAgICAgIG1heExlbmd0aDogbWF4TGVuZ3RoKHRoaXMuaG91c2VWYWx1ZSlcbiAgICAgIH0sXG4gICAgICBzZWxlY3RlZEZpY29TY29yZToge1xuICAgICAgICByZXF1aXJlZFxuICAgICAgfSxcbiAgICAgIGVtYWlsOiB7XG4gICAgICAgIHJlcXVpcmVkLFxuICAgICAgICBlbWFpbFxuICAgICAgfSxcbiAgICAvLyB9XG4gIH0sXG4gIGNvbXB1dGVkOiB7XG4gICAgbHR2OiBmdW5jdGlvbigpIHtcbiAgICAgIHZhciBsdHYgPSAoYWNjb3VudGluZy51bmZvcm1hdCh0aGlzLmxvYW5BbW91bnQpIC9cbiAgICAgICAgYWNjb3VudGluZy51bmZvcm1hdCh0aGlzLmhvdXNlVmFsdWUpICogMTAwKS50b0ZpeGVkKDIpO1xuXG4gICAgICBzd2l0Y2godGhpcy5zZWxlY3RlZEZpY29TY29yZSkge1xuXG4gICAgICAgICAgY2FzZSAnNzYwKyc6XG4gICAgICAgICAgaWYgKCBsdHYgPD0gODUgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAwMTk7XG4gICAgICAgICAgZWxzZSBpZiAoIGx0diA+PSA4NS4wMSAmJiBsdHYgPD0gOTAgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAwMzA7XG4gICAgICAgICAgZWxzZSBpZiAoIGx0diA+PSA5MC4wMSAmJiBsdHYgPD0gOTUgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAwNDE7XG4gICAgICAgICAgZWxzZSBpZiAoIGx0diA+PSA5NS4wMSAmJiBsdHYgPD0gOTcgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAwNTU7XG4gICAgICAgICAgICAgIGJyZWFrO1xuXG4gICAgICAgICAgY2FzZSAnNzQwLTc1OSc6XG4gICAgICAgICAgaWYgKCBsdHYgPD0gODUgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAwMjA7XG4gICAgICAgICAgZWxzZSBpZiAoIGx0diA+PSA4NS4wMSAmJiBsdHYgPD0gOTAgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAwNDE7XG4gICAgICAgICAgZWxzZSBpZiAoIGx0diA+PSA5MC4wMSAmJiBsdHYgPD0gOTUgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAwNTk7XG4gICAgICAgICAgZWxzZSBpZiAoIGx0diA+PSA5NS4wMSAmJiBsdHYgPD0gOTcgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAwNzU7XG4gICAgICAgICAgICAgIGJyZWFrO1xuXG4gICAgICAgICAgY2FzZSAnNzIwLTczOSc6XG4gICAgICAgICAgaWYgKCBsdHYgPD0gODUgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAwMjM7XG4gICAgICAgICAgZWxzZSBpZiAoIGx0diA+PSA4NS4wMSAmJiBsdHYgPD0gOTAgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAwNTA7XG4gICAgICAgICAgZWxzZSBpZiAoIGx0diA+PSA5MC4wMSAmJiBsdHYgPD0gOTUgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAwNzM7XG4gICAgICAgICAgZWxzZSBpZiAoIGx0diA+PSA5NS4wMSAmJiBsdHYgPD0gOTcgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAwOTU7XG4gICAgICAgICAgICAgIGJyZWFrO1xuXG4gICAgICAgICAgY2FzZSAnNzAwLTcxOSc6XG4gICAgICAgICAgaWYgKCBsdHYgPD0gODUgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAwMjc7XG4gICAgICAgICAgZWxzZSBpZiAoIGx0diA+PSA4NS4wMSAmJiBsdHYgPD0gOTAgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAwNjA7XG4gICAgICAgICAgZWxzZSBpZiAoIGx0diA+PSA5MC4wMSAmJiBsdHYgPD0gOTUgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAwODc7XG4gICAgICAgICAgZWxzZSBpZiAoIGx0diA+PSA5NS4wMSAmJiBsdHYgPD0gOTcgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAxMTU7XG4gICAgICAgICAgICAgIGJyZWFrO1xuXG4gICAgICAgICAgY2FzZSAnNjgwLTY5OSc6XG4gICAgICAgICAgaWYgKCBsdHYgPD0gODUgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAwMzI7XG4gICAgICAgICAgZWxzZSBpZiAoIGx0diA+PSA4NS4wMSAmJiBsdHYgPD0gOTAgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAwNzM7XG4gICAgICAgICAgZWxzZSBpZiAoIGx0diA+PSA5MC4wMSAmJiBsdHYgPD0gOTUgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAxMDg7XG4gICAgICAgICAgZWxzZSBpZiAoIGx0diA+PSA5NS4wMSAmJiBsdHYgPD0gOTcgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAxNDA7XG4gICAgICAgICAgICAgIGJyZWFrO1xuXG4gICAgICAgICAgY2FzZSAnNjYwLTk3OSc6XG4gICAgICAgICAgaWYgKCBsdHYgPD0gODUgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAwNDE7XG4gICAgICAgICAgZWxzZSBpZiAoIGx0diA+PSA4NS4wMSAmJiBsdHYgPD0gOTAgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAxMDA7XG4gICAgICAgICAgZWxzZSBpZiAoIGx0diA+PSA5MC4wMSAmJiBsdHYgPD0gOTUgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAxNDI7XG4gICAgICAgICAgZWxzZSBpZiAoIGx0diA+PSA5NS4wMSAmJiBsdHYgPD0gOTcgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAxOTA7XG4gICAgICAgICAgICAgIGJyZWFrO1xuXG4gICAgICAgICAgY2FzZSAnNjQwLTY1OSc6XG4gICAgICAgICAgaWYgKCBsdHYgPD0gODUgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAwNDM7XG4gICAgICAgICAgZWxzZSBpZiAoIGx0diA+PSA4NS4wMSAmJiBsdHYgPD0gOTAgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAxMDU7XG4gICAgICAgICAgZWxzZSBpZiAoIGx0diA+PSA5MC4wMSAmJiBsdHYgPD0gOTUgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAxNTA7XG4gICAgICAgICAgZWxzZSBpZiAoIGx0diA+PSA5NS4wMSAmJiBsdHYgPD0gOTcgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAyMDU7XG4gICAgICAgICAgICAgIGJyZWFrO1xuXG4gICAgICAgICAgY2FzZSAnNjIwLTYzOSc6XG4gICAgICAgICAgaWYgKCBsdHYgPD0gODUgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAwNDU7XG4gICAgICAgICAgZWxzZSBpZiAoIGx0diA+PSA4NS4wMSAmJiBsdHYgPD0gOTAgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAxMTA7XG4gICAgICAgICAgZWxzZSBpZiAoIGx0diA+PSA5MC4wMSAmJiBsdHYgPD0gOTUgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAxNjE7XG4gICAgICAgICAgZWxzZSBpZiAoIGx0diA+PSA5NS4wMSAmJiBsdHYgPD0gOTcgKVxuICAgICAgICAgICAgICB0aGlzLmJhc2lzUG9pbnRzID0gLjAyMjU7XG4gICAgICAgICAgICAgIGJyZWFrO1xuXG4gICAgICB9XG4gICAgICByZXR1cm4gbHR2O1xuICAgIH0sXG4gICAgZXF1aXR5UGVyY2VudGFnZTogZnVuY3Rpb24oKSB7XG4gICAgICByZXR1cm4gKDEwMCAtIHRoaXMubHR2KS50b0ZpeGVkKDIpO1xuICAgIH0sXG4gICAgZXF1aXR5OiBmdW5jdGlvbigpIHtcbiAgICAgIHJldHVybiBhY2NvdW50aW5nLmZvcm1hdE1vbmV5KGFjY291bnRpbmcudW5mb3JtYXQodGhpcy5ob3VzZVZhbHVlKSAtXG4gICAgICAgIGFjY291bnRpbmcudW5mb3JtYXQodGhpcy5sb2FuQW1vdW50KSwgJyQnLCAwKTtcbiAgICB9LFxuICAgIHBtaTogZnVuY3Rpb24oKSB7XG4gICAgICBpZih0aGlzLmx0diA8PSA4MCkge1xuICAgICAgICByZXR1cm4gMFxuICAgICAgfVxuICAgICAgZWxzZSB7XG4gICAgICAgIHJldHVybiBhY2NvdW50aW5nLmZvcm1hdE1vbmV5KFxuICAgICAgICAgICh0aGlzLmJhc2lzUG9pbnRzICogYWNjb3VudGluZy51bmZvcm1hdCh0aGlzLmxvYW5BbW91bnQpKSAvIDEyKTtcbiAgICAgIH1cbiAgICB9XG4gIH0sXG4gIG1ldGhvZHM6IHtcbiAgICAgIGdldFZhbGlkYXRpb25DbGFzcyAoZmllbGROYW1lKSB7XG4gICAgICAgIGNvbnN0IGZpZWxkID0gdGhpcy4kdltmaWVsZE5hbWVdXG5cbiAgICAgICAgaWYgKGZpZWxkKSB7XG4gICAgICAgICAgcmV0dXJuIHtcbiAgICAgICAgICAgICdtZC1pbnZhbGlkJzogZmllbGQuJGludmFsaWQgJiYgZmllbGQuJGRpcnR5XG4gICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICB9LFxuICAgICAgY2xlYXJGb3JtICgpIHtcbiAgICAgICAgdGhpcy4kdi4kcmVzZXQoKVxuICAgICAgICB0aGlzLmhvdXNlVmFsdWUgPSBudWxsXG4gICAgICAgIHRoaXMubG9hbkFtb3VudCA9IG51bGxcbiAgICAgICAgdGhpcy5zZWxlY3RlZEZpY29TY29yZSA9IG51bGxcbiAgICAgIH0sXG4gICAgICBzYXZlVXNlciAoKSB7XG4gICAgICAgIHRoaXMuc2VuZGluZyA9IHRydWVcblxuICAgICAgICAvLyBJbnN0ZWFkIG9mIHRoaXMgdGltZW91dCwgaGVyZSB5b3UgY2FuIGNhbGwgeW91ciBBUElcbiAgICAgICAgd2luZG93LnNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICAgIHRoaXMubGFzdFVzZXIgPSBgJHt0aGlzLmxvYW5BbW91bnR9ICR7dGhpcy5ob3VzZVZhbHVlfWBcbiAgICAgICAgICB0aGlzLnVzZXJTYXZlZCA9IHRydWVcbiAgICAgICAgICB0aGlzLnNlbmRpbmcgPSBmYWxzZVxuICAgICAgICAgIHRoaXMuY2xlYXJGb3JtKClcbiAgICAgICAgfSwgMTUwMClcbiAgICAgIH0sXG4gICAgICB2YWxpZGF0ZVVzZXIgKCkge1xuICAgICAgICB0aGlzLiR2LiR0b3VjaCgpXG5cbiAgICAgICAgaWYgKCF0aGlzLiR2LiRpbnZhbGlkKSB7XG4gICAgICAgICAgdGhpcy5zYXZlVXNlcigpXG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9LFxufTtcbjwvc2NyaXB0PlxuXG48IS0tIEFkZCBcInNjb3BlZFwiIGF0dHJpYnV0ZSB0byBsaW1pdCBDU1MgdG8gdGhpcyBjb21wb25lbnQgb25seSAtLT5cbjxzdHlsZSBzY29wZWQ+XG5oMSwgaDIge1xuICBmb250LXdlaWdodDogbm9ybWFsO1xufVxudWwge1xuICBsaXN0LXN0eWxlLXR5cGU6IG5vbmU7XG4gIHBhZGRpbmc6IDA7XG59XG5saSB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgbWFyZ2luOiAwIDEwcHg7XG59XG5hIHtcbiAgY29sb3I6ICM0MmI5ODM7XG59XG48L3N0eWxlPlxuIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQW1FQTtBQUNBO0FBQ0E7QUFDQTtBQU9BO0FBRUE7QUFDQTs7O0FBRUE7QUFDQTtBQUVBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBVkE7OztBQWFBOztBQUVBO0FBQ0E7QUFGQTs7QUFLQTtBQUNBO0FBQ0E7QUFIQTs7QUFNQTtBQURBOztBQUlBO0FBQ0E7QUFGQTtBQUlBO0FBbEJBOztBQXFCQTtBQUNBO0FBQ0E7QUFHQTtBQUNBO0FBQUE7QUFDQTtBQVNBO0FBQ0E7QUFBQTtBQUNBO0FBU0E7QUFDQTtBQUFBO0FBQ0E7QUFTQTtBQUNBO0FBQUE7QUFDQTtBQVNBO0FBQ0E7QUFBQTtBQUNBO0FBU0E7QUFDQTtBQUFBO0FBQ0E7QUFTQTtBQUNBO0FBQUE7QUFDQTtBQVNBO0FBQ0E7QUFBQTtBQUNBO0FBU0E7QUFDQTs7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUVBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFFQTtBQUVBO0FBQ0E7QUFqSEE7O0FBb0hBO0FBRUE7QUFDQTtBQUFBOztBQUVBO0FBREE7QUFHQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBRUE7QUFDQTtBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBakNBO0FBdEpBIiwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/PMI.vue\n");
Raw
PMI.vue
<template>
<form novalidate class="md-layout-row md-gutter" @submit.prevent="validateUser">
<md-card class="md-flex-50 md-flex-small-100">
<md-card-header>
<div class="md-title">PMI Calculator</div>
</md-card-header>
<md-card-content>
<div class="md-layout-row md-layout-wrap md-gutter">
<div class="md-flex md-flex-small-100">
<md-field :class="getValidationClass('houseValue')">
<label for="purchase-price">Purchase Price/Estimated Property Value</label>
<md-input name="purchase-price" id="purchase-price" autocomplete="given-name" v-model="houseValue" :disabled="sending" />
<span class="md-error" v-if="!$v.houseValue.required">The purchase price is required</span>
<span class="md-error" v-else-if="!$v.houseValue.between">Invalid purchase price</span>
</md-field>
</div>
<div class="md-flex md-flex-small-100">
<md-field :class="getValidationClass('loanAmount')">
<label for="last-name">Loan Amount</label>
<md-input name="last-name" id="loan-amount" autocomplete="loan-amount" v-model="loanAmount" :disabled="sending" />
<span class="md-error" v-if="!$v.loanAmount.required">The loan amount is required</span>
<span class="md-error" v-else-if="!$v.loanAmount.between">Invalid loan amount</span>
<span class="md-error" v-else-if="!$v.loanAmount.maxLength">Loan amount cannot be more than purchase price</span>
</md-field>
</div>
</div>
<div class="md-layout-row md-gutter md-layout-wrap">
<div class="md-flex md-flex-small-100">
<md-field :class="getValidationClass('selectedFicoScore')">
<label for="fico-score">Fico Score</label>
<md-select v-model="selectedFicoScore" md-dense>
<md-option v-for="score in ficoScores" :key='score'>{{score}}</md-option>
</md-select>
<!-- <select class="form-control" v-model="selectedFicoScore">
<option v-for="score in ficoScores" :key='score'>{{score}}</option>
</select> -->
<span class="md-error">FICO score is required</span>
</md-field>
</div>
</div>
Your LTV (Loan to Value) is <strong>{{ltv}}%</strong> <br />
You have <strong>{{equityPercentage}}%</strong> equity which is <strong>{{equity}}</strong><br />
Selected FICO score is <b>{{selectedFicoScore}}</b> <br />
<span v-if="ltv > 80">
Your will pay approximatley <strong>{{pmi}}</strong> in Private Mortgage Insurance per month.
</span>
<span v-if="ltv < 80">
YAY no PMI for you!
</span>
</md-card-content>
<md-progress-bar md-mode="indeterminate" v-if="sending" />
</md-card>
<md-snackbar :md-active.sync="userSaved">The user {{ lastUser }} was saved with success!</md-snackbar>
</form>
</template>
<script>
import accounting from 'accounting'
import { validationMixin } from 'vuelidate'
import {
required,
email,
minLength,
maxLength,
between
} from 'vuelidate/lib/validators'
export default {
name: 'PMI',
mixins: [validationMixin],
data: () => ({
menuVisible: false,
ficoScores: [ '760+', '740-759','720-739', '700-719', '680-699',
'660-679', '640-659', '620-639'],
selectedFicoScore: '660-679',
houseValue: accounting.formatMoney(300000,'$', 0),
loanAmount: accounting.formatMoney(285000,'$', 0),
basisPoints: 0,
userSaved: false,
sending: false,
lastUser: null,
}),
validations: {
// form: {
houseValue: {
required,
between: between(0, 100000000)
},
loanAmount: {
required,
between: between(0, 100000000),
maxLength: maxLength(this.houseValue)
},
selectedFicoScore: {
required
},
email: {
required,
email
},
// }
},
computed: {
ltv: function() {
var ltv = (accounting.unformat(this.loanAmount) /
accounting.unformat(this.houseValue) * 100).toFixed(2);
switch(this.selectedFicoScore) {
case '760+':
if ( ltv <= 85 )
this.basisPoints = .0019;
else if ( ltv >= 85.01 && ltv <= 90 )
this.basisPoints = .0030;
else if ( ltv >= 90.01 && ltv <= 95 )
this.basisPoints = .0041;
else if ( ltv >= 95.01 && ltv <= 97 )
this.basisPoints = .0055;
break;
case '740-759':
if ( ltv <= 85 )
this.basisPoints = .0020;
else if ( ltv >= 85.01 && ltv <= 90 )
this.basisPoints = .0041;
else if ( ltv >= 90.01 && ltv <= 95 )
this.basisPoints = .0059;
else if ( ltv >= 95.01 && ltv <= 97 )
this.basisPoints = .0075;
break;
case '720-739':
if ( ltv <= 85 )
this.basisPoints = .0023;
else if ( ltv >= 85.01 && ltv <= 90 )
this.basisPoints = .0050;
else if ( ltv >= 90.01 && ltv <= 95 )
this.basisPoints = .0073;
else if ( ltv >= 95.01 && ltv <= 97 )
this.basisPoints = .0095;
break;
case '700-719':
if ( ltv <= 85 )
this.basisPoints = .0027;
else if ( ltv >= 85.01 && ltv <= 90 )
this.basisPoints = .0060;
else if ( ltv >= 90.01 && ltv <= 95 )
this.basisPoints = .0087;
else if ( ltv >= 95.01 && ltv <= 97 )
this.basisPoints = .0115;
break;
case '680-699':
if ( ltv <= 85 )
this.basisPoints = .0032;
else if ( ltv >= 85.01 && ltv <= 90 )
this.basisPoints = .0073;
else if ( ltv >= 90.01 && ltv <= 95 )
this.basisPoints = .0108;
else if ( ltv >= 95.01 && ltv <= 97 )
this.basisPoints = .0140;
break;
case '660-979':
if ( ltv <= 85 )
this.basisPoints = .0041;
else if ( ltv >= 85.01 && ltv <= 90 )
this.basisPoints = .0100;
else if ( ltv >= 90.01 && ltv <= 95 )
this.basisPoints = .0142;
else if ( ltv >= 95.01 && ltv <= 97 )
this.basisPoints = .0190;
break;
case '640-659':
if ( ltv <= 85 )
this.basisPoints = .0043;
else if ( ltv >= 85.01 && ltv <= 90 )
this.basisPoints = .0105;
else if ( ltv >= 90.01 && ltv <= 95 )
this.basisPoints = .0150;
else if ( ltv >= 95.01 && ltv <= 97 )
this.basisPoints = .0205;
break;
case '620-639':
if ( ltv <= 85 )
this.basisPoints = .0045;
else if ( ltv >= 85.01 && ltv <= 90 )
this.basisPoints = .0110;
else if ( ltv >= 90.01 && ltv <= 95 )
this.basisPoints = .0161;
else if ( ltv >= 95.01 && ltv <= 97 )
this.basisPoints = .0225;
break;
}
return ltv;
},
equityPercentage: function() {
return (100 - this.ltv).toFixed(2);
},
equity: function() {
return accounting.formatMoney(accounting.unformat(this.houseValue) -
accounting.unformat(this.loanAmount), '$', 0);
},
pmi: function() {
if(this.ltv <= 80) {
return 0
}
else {
return accounting.formatMoney(
(this.basisPoints * accounting.unformat(this.loanAmount)) / 12);
}
}
},
methods: {
getValidationClass (fieldName) {
const field = this.$v[fieldName]
if (field) {
return {
'md-invalid': field.$invalid && field.$dirty
}
}
},
clearForm () {
this.$v.$reset()
this.houseValue = null
this.loanAmount = null
this.selectedFicoScore = null
},
saveUser () {
this.sending = true
// Instead of this timeout, here you can call your API
window.setTimeout(() => {
this.lastUser = `${this.loanAmount} ${this.houseValue}`
this.userSaved = true
this.sending = false
this.clearForm()
}, 1500)
},
validateUser () {
this.$v.$touch()
if (!this.$v.$invalid) {
this.saveUser()
}
}
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment