Working with Vue.js Vuetify scripts.?

?

I had this function to display a status alert at the top of my page:

?

? ? ? ?showAlert(aMessage, aType)

? ? ? ? {

? ? ? ? ? this.alert = true;

? ? ? ? ? this.statusAlert = aMessage;

? ? ? ? ? this.alertType = aType;

? ? ? ? ? console.log(aType, aMessage);

? ? ? ? },

?

Tried to invoke it and got this error in the console:

Filer.htm:505? Uncaught TypeError: this.showAlert is not a function

?

Banged my head for a good hour trying to figure out what was going on.? Finally added this code:

?

? ? ? ?onAlert(alertMsg,alertType)

? ? ? ? {

? ? ? ? ? console.log('got here');

? ? ? ? ? console.log(alertMsg,alertType);

? ? ? ? ? this.alert = true;

? ? ? ? ? this.statusAlert = alertMsg;

? ? ? ? ? this.alertType = alertType;

? ? ? ? },

?

Called that, using the same parameters, initial tests worked.? OK, that was odd, but whatever.? I erased the showAlert code and changed all showAlert calls to onAlert.? Now I’m getting onAlert is not a function! ?Switched back to showAlert, some calls fail, other do not ?– can’t get anything to work consistently.?

?

Finally gave up on the idea of an alert function – replaced all instances of showAlert(“message”,”type”) with commands to directly set statusAlert and alertType

?

I have no idea WTF is wrong.? FWIW, I ran my code thru a validator and got no complaints.? Pasting the entire code block below in case someone with nothing better to do wants to look at it but as long as my workaround is functional I have minimal interest in messing further with this.

?

?

--sg

?

? <script type="text/javascript">

? ? new Vue({

? ? ? el: '#app',

? ? ? vuetify: new Vuetify(),

? ? ? mounted()

? ? ? {

? ? ? ? console.log('Checking logon status');

? ? ? ? ajaxJson("LogonStatus.scp", null,

? ? ? ? ? (response) =>

? ? ? ? ? {

? ? ? ? ? ? console.log(response);

? ? ? ? ? ? this.oUser = response;

? ? ? ? ? ? if (this.oUser.level < 4)

? ? ? ? ? ? {

? ? ? ? ? ? ? alert('You do not have permission to access this page.');

? ? ? ? ? ? ? window.open('SCPLogon.htm', '_self', 'noreferrer');

? ? ? ? ? ? }

? ? ? ? ? ? else

? ? ? ? ? ? {

? ? ? ? ? ? ? this.onAlert = ('Logged on as ' + this.oUser.username, "success");

? ? ? ? ? ? }

? ? ? ? ? },

? ? ? ? ? (error) =>

? ? ? ? ? {

? ? ? ? ? ? console.log('ERROR');

? ? ? ? ? ? console.log(error.message);

? ? ? ? ? ? window.open('SCPLogon.htm', '_self', 'noreferrer');

? ? ? ? ? });

? ? ? ? const payLoad = { mode: "table" };

? ? ? ? ajaxJson("/SCP/Getfiles.scp", payLoad,

? ? ? ? ? (response) =>

? ? ? ? ? {

? ? ? ? ? ? console.log("Got tables");

? ? ? ? ? ? this.tableList = response;

? ? ? ? ? ? console.log(this.tableList);

? ? ? ? ? },

? ? ? ? ? (error) =>

? ? ? ? ? {

? ? ? ? ? ? this.onAlert(error.message, "error");

? ? ? ? ? });

? ? ? ? return;

? ? ? },

? ? ? data: () => (

? ? ? ? {

? ? ? ? ? oUser: {},

? ? ? ? ? date: new Date().toISOString().substr(0, 10),

? ? ? ? ? menu: false,

? ? ? ? ? menu2: false,

? ? ? ? ? menu3: false,

? ? ? ? ? alert: true,

? ? ? ? ? search: '',

? ? ? ? ? statusAlert: '',

? ? ? ? ? tableList: '',

? ? ? ? ? fieldList: [],

? ? ? ? ? selectedFields: [],

? ? ? ? ? queryString: "",

? ? ? ? ? logList: [],

? ? ? ? ? iniList: [{ filename: 'scp.ini' }],

? ? ? ? ? alertType: '',

? ? ? ? ? dataMode: 0,

? ? ? ? ? valid: true,

? ? ? ? ? tab: null,

? ? ? ? ? items: [],

? ? ? ? ? fieldPicker: false,

? ? ? ? ? menuItems: [

? ? ? ? ? ? { text: 'Edit Profile', href: 'Patron.htm?id=:USER' },

? ? ? ? ? ? { text: 'Log Off', href: 'SCPLogon.htm' },

? ? ? ? ? ],

? ? ? ? ? tableName: "",

? ? ? ? ? selectedTable: { filename: '' },

? ? ? ? ? selectedLog: { filename: '' },

? ? ? ? ? selectedIni: { filename: '' },

? ? ? ? ? logContent: "",

? ? ? ? ? iniContent: "",

? ? ? ? ? headers: [],

? ? ? ? ? fieldHeaders: [

? ? ? ? ? ? {

? ? ? ? ? ? ? text: 'Field Name',

? ? ? ? ? ? ? align: 'start',

? ? ? ? ? ? ? value: 'fieldname',

? ? ? ? ? ? ? class: "grey accent-1"

? ? ? ? ? ? }

? ? ? ? ? ],

? ? ? ? ? pagination:

? ? ? ? ? {

? ? ? ? ? ? page: 1,

? ? ? ? ? ? rowsPerPage: 20

? ? ? ? ? },

? ? ? ? }),

? ? ? methods: {

? ? ? ? validate()

? ? ? ? {

? ? ? ? ? this.$refs.form.validate()

? ? ? ? },

?

? ? ? ? resetValidation()

? ? ? ? {

? ? ? ? ? this.$refs.form.resetValidation()

? ? ? ? },

?

? ? ? ? showAlert(aMessage, aType)

? ? ? ? {

? ? ? ? ? this.alert = true;

? ? ? ? ? this.statusAlert = aMessage;

? ? ? ? ? this.alertType = aType;

? ? ? ? ? console.log(aType, aMessage);

? ? ? ? },

? ? ? ? onAlert(alertMsg,alertType)

? ? ? ? {

? ? ? ? ? console.log(alertMsg,alertType);

? ? ? ? ? this.alert = true;

? ? ? ? ? this.statusAlert = alertMsg;

? ? ? ? ? this.alertType = alertType;

? ? ? ? },

? ? ? ? navigate(href)

? ? ? ? {

? ? ? ? ? console.log('navigating..' + href);

? ? ? ? ? window.location.href = href;

? ? ? ? },

? ? ? ? genHeaders()

? ? ? ? {

? ? ? ? ? {

? ? ? ? ? ? //set having unique values

? ? ? ? ? ? let s = new Set();

?

? ? ? ? ? ? this.items.forEach(item =>

? ? ? ? ? ? {

? ? ? ? ? ? ? for (f in item)

? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? //adding an existing value doesn't override the old one

? ? ? ? ? ? ? ? s.add(f)

? ? ? ? ? ? ? }

? ? ? ? ? ? });

? ? ? ? ? ? //respect the headers format required by Vuetify which

? ? ? ? ? ? // should has at least two fields (text, value)

? ? ? ? ? ? return Array.from(s).map(a =>

? ? ? ? ? ? {

? ? ? ? ? ? ? return {

? ? ? ? ? ? ? ? text: a.toUpperCase(),

? ? ? ? ? ? ? ? value: a

? ? ? ? ? ? ? }

? ? ? ? ? ? });

? ? ? ? ? }

? ? ? ? },

? ? ? ? goToLastPage()

? ? ? ? {

? ? ? ? ? const totalItems = this.items.length;

? ? ? ? ? const rowsPerPage = this.pagination.rowsPerPage;

? ? ? ? ? const lastPage = Math.ceil(totalItems / rowsPerPage);

? ? ? ? ? console.log('last', lastPage);

? ? ? ? ? this.pagination.page = lastPage; // Update the current page to the last

? ? ? ? },

? ? ? ? goToFirstPage()

? ? ? ? {

? ? ? ? ? this.pagination.page = 1;

? ? ? ? },

? ? ? ? onTabSelected(index)

? ? ? ? {

? ? ? ? ? console.log(this.tab);

? ? ? ? ? switch (this.tab)

? ? ? ? ? {

? ? ? ? ? ? case "tab2":

? ? ? ? ? ? ? const payLoad = { mode: "logs" };

? ? ? ? ? ? ? ajaxJson("/SCP/Getfiles.scp", payLoad,

? ? ? ? ? ? ? ? (response) =>

? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? console.log("Got logs", response);

? ? ? ? ? ? ? ? ? this.logList = response;

? ? ? ? ? ? ? ? ? console.log(this.logList);

? ? ? ? ? ? ? ? ? this.selectedLog = this.logList[0].filename; ?// ?? is drop down model an object or a string, ?doesn't work using selectedLog.filename

? ? ? ? ? ? ? ? ? this.loadText("logs", this.logList[0].filename);

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? (error) =>

? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? this.onAlert(error.message, "error");

? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? break;

? ? ? ? ? ? case "tab3":

? ? ? ? ? ? ? this.selectedIni = this.iniList[0].filename;

? ? ? ? ? ? ? console.log('ini tab');

? ? ? ? ? ? ? this.loadText("inis", this.iniList[0].filename);

? ? ? ? ? ? ? break;

? ? ? ? ? }

? ? ? ? },

? ? ? ? loadText(fileType, fileName)

? ? ? ? {

? ? ? ? ? fileName = this.qualifyName(fileType, fileName);

? ? ? ? ? const payLoad = { filename: fileName, action: "read" };

? ? ? ? ? ajaxJson("/SCP/filer.scp", payLoad,

? ? ? ? ? ? (response) =>

? ? ? ? ? ? {

? ? ? ? ? ? ? console.log("Got file contents");

? ? ? ? ? ? ? // ? ? ? ? ? ? ? this.logList = response;

? ? ? ? ? ? ? console.log(response);

? ? ? ? ? ? ? switch (fileType)

? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? case "logs":

? ? ? ? ? ? ? ? ? this.logContent = response.content;

? ? ? ? ? ? ? ? ? break;

? ? ? ? ? ? ? ? case "inis":

? ? ? ? ? ? ? ? ? this.iniContent = response.content;

? ? ? ? ? ? ? ? ? break;

? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ? ? (error) =>

? ? ? ? ? ? {

? ? ? ? ? ? ? this.onAlert(error.message, "error");

? ? ? ? ? ? });

? ? ? ? },

? ? ? ? saveText(fileType, fileName, fileContents)

? ? ? ? {

? ? ? ? ? fileName = this.qualifyName(fileType, fileName);

? ? ? ? ? fileContents = this.qualifyContents(fileType);

? ? ? ? ? //this.showAlert('!!!!');

? ? ? ? ?// this.onAlert('saving','success');

? ? ? ? ? const payLoad = { filename: fileName, action: "save", contents: fileContents };

? ? ? ? ? ajaxJson("/SCP/filer.scp", payLoad,

? ? ? ? ? ? (response) =>

? ? ? ? ? ? {

? ? ? ? ? ? ? console.log(this.selectedIni);

? ? ? ? ? ? ? this.showAlert("File " + fileName + " has been updated on the server", "success");

? ? ? ? ? ? ? console.log(response);

? ? ? ? ? ? },

? ? ? ? ? ? (error) =>

? ? ? ? ? ? {

? ? ? ? ? ? ? this.showAlert(error.message, "error");

? ? ? ? ? ? });

? ? ? ? },

? ? ? ? qualifyName(fileType, fileName)

? ? ? ? {

? ? ? ? ? console.log('Qualifying', fileName, fileType);

? ? ? ? ? switch (fileType)

? ? ? ? ? {

? ? ? ? ? ? case "logs":

? ? ? ? ? ? ? console.log(fileName, this.selectedLogs, this.selectedLogs.filename);

? ? ? ? ? ? ? if (!fileName)

? ? ? ? ? ? ? ? fileName = this.selectedLog.filename;

? ? ? ? ? ? ? fileName = '\\logs\\' + fileName + '.txt';

? ? ? ? ? ? ? break;

? ? ? ? ? ? case "inis":

? ? ? ? ? ? ? console.log(fileName, this.selectedIni, this.selectedIni.filename);

? ? ? ? ? ? ? if (!fileName)

? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? if (this.selectedIni.filename)

? ? ? ? ? ? ? ? ? fileName = this.selectedIni.filename

? ? ? ? ? ? ? ? else

? ? ? ? ? ? ? ? ? fileName = this.selectedIni;

? ? ? ? ? ? ? }

? ? ? ? ? ? ? break;

? ? ? ? ? }

? ? ? ? ? console.log('...to ', fileName);

? ? ? ? ? return fileName;

? ? ? ? },

?

? ? ? ? qualifyContents(fileType)

? ? ? ? {

? ? ? ? ? let contents = '';

? ? ? ? ? switch (fileType)

? ? ? ? ? {

? ? ? ? ? ? case "inis":

? ? ? ? ? ? ? contents = this.iniContent;

? ? ? ? ? ? ? break;

? ? ? ? ? }

? ? ? ? ? console.log('Contents: ', contents);

? ? ? ? ? return contents;

? ? ? ? },

?

? ? ? ? jumpToBottom()

? ? ? ? {

? ? ? ? ? console.log('to bottom?');

? ? ? ? ? document.getElementById("log-entries").scrollTop = document.getElementById("log-entries").scrollHeight;

? ? ? ? },

? ? ? ? tableSelected()

? ? ? ? {

? ? ? ? ? const payLoad = { table: this.selectedTable.filename };

? ? ? ? ? this.items = [];

? ? ? ? ? console.log(payLoad);

? ? ? ? ? ajaxJson("/SCP/Getfields.scp", payLoad,

? ? ? ? ? ? (response) =>

? ? ? ? ? ? {

? ? ? ? ? ? ? console.log("Got fields");

? ? ? ? ? ? ? this.fieldList = response;

? ? ? ? ? ? ? console.log(this.fieldList);

? ? ? ? ? ? ? this.fieldPicker = true;

? ? ? ? ? ? ? this.queryString = "SELECT * FROM " + this.selectedTable.filename;

? ? ? ? ? ? },

? ? ? ? ? ? (error) =>

? ? ? ? ? ? {

? ? ? ? ? ? ? this.onAlert(error.message, "error");

? ? ? ? ? ? });

? ? ? ? ? return;

? ? ? ? },

? ? ? ? selectFields()

? ? ? ? {

? ? ? ? ? console.log('selectFields', this.fieldPicker)

? ? ? ? ? if (!this.fieldPicker)

? ? ? ? ? ? this.fieldPicker = true

? ? ? ? ? else

? ? ? ? ? {

? ? ? ? ? ? let fldstr = '';

? ? ? ? ? ? this.selectedFields.forEach(f =>

? ? ? ? ? ? {

? ? ? ? ? ? ? console.log(f.fieldname);

? ? ? ? ? ? ? fldstr += f.fieldname + ',';

? ? ? ? ? ? }

? ? ? ? ? ? )

? ? ? ? ? ? this.selectedFields = [];

? ? ? ? ? ? if (fldstr)

? ? ? ? ? ? {

? ? ? ? ? ? ? fldstr = fldstr.replace(/,$/, "");

? ? ? ? ? ? ? this.queryString = this.queryString.replace("*", fldstr);

? ? ? ? ? ? ? console.log(fldstr);

? ? ? ? ? ? }

? ? ? ? ? ? this.fieldPicker = false;

? ? ? ? ? }

? ? ? ? },

? ? ? ? submitQuery()

? ? ? ? {

? ? ? ? ? console.log('Executing SQL request..');

? ? ? ? ? console.log(this.tableName);

? ? ? ? ? let submitObject = { sql: this.queryString };

? ? ? ? ? console.log(submitObject);

? ? ? ? ? ajaxJson("/SCP/SQLizer.scp", submitObject,

? ? ? ? ? ? (response) =>

? ? ? ? ? ? {

? ? ? ? ? ? ? console.log(response);

? ? ? ? ? ? ? this.items = response;

? ? ? ? ? ? ? this.items.forEach(item =>

? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? // ? ? ? ?console.log("item", item);

? ? ? ? ? ? ? ? for (f in item)

? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? // ? ? ? ? ?console.log("f", f);

? ? ? ? ? ? ? ? ? if (item[f] instanceof Date)

? ? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? item[f] = moment(item[f]).format(moment.HTML5_FMT.DATE);

? ? ? ? ? ? ? ? ? ? if (f == 'updated')

? ? ? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? ? item[f] = moment(item[f]).format('LLL');

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? });

? ? ? ? ? ? ? this.headers = this.genHeaders();

? ? ? ? ? ? },

? ? ? ? ? ? (error) =>

? ? ? ? ? ? {

? ? ? ? ? ? ? console.log(error);

? ? ? ? ? ? ? this.onAlert(error.message, "error");

? ? ? ? ? ? }

? ? ? ? ? );

? ? ? ? }

? ? ? }

? ? })

? </script>

?

?

?