I'm currently using a 'commonLibrary.js' in my Vue application.
One of the functions in this library that I find particularly useful is:
var defaultDecimalRounding=3
function formatNumber(number) {
if (isNaN(number.value) == true) { return '-' }
return numberWithCommas(parseFloat(number.value, 2).toFixed(defaultDecimalRounding));
}Whenever "formatNumber" is called, it rounds the number to a specific decimal point, defined by the variable "defaultDecimalRounding"
However, I would like to be able to change this defaultDecimalRounding value within my Vue App instead of having it hardcoded in commonLibrary.js.
To achieve this, I tried creating a Mixin:
Vue.mixin({
data: function () {
return {
get defaultDecimalRounding() { return 3 },
}
},
});Unfortunately, I encountered an issue where my formatNumber function couldn't access this defaultDecimalRounding Mixin.
Although I am open to rewriting the code in commonLibrary.js, which only contains a few functions, I am curious about how to establish communication between VueJS and an imported JS library for future projects.
edit The commonLibrary.js is imported using the following code:
import common from './scripts/common.js';
const commonLibrary = {
install() {
Vue.common = common
Vue.prototype.$common = common
}
}
Vue.use(commonLibrary)