Level 102
What do you get if you do this?
window.productTaxesCalculator = (e) => {
console.log(e)
}
Sep 11, 2020
13
Level 41
AlpineJS and Laravel Mix
Hi everyone,
I've got some trouble using alpine JS and Laravel Mix, and someone here will probably help me to understand and fix this
I'm using AlpineJS in my view like this:
<div x-data="productTaxesCalcultator()" x-init="init(X, Y)">
........
</div>
When I create the script tag in the same page, it's perfectly working
function productTaxesCalcultator() {
return {
ht: 0,
tva: 0,
ttc: '',
calculate: function() {
this.ttc = (this.ht + (this.ht * (this.tva / 100))).toFixed(2);
},
init(ht, tva) {
this.ht = parseFloat(ht);
this.tva = parseFloat(tva);
this.calculate();
}
}
}
But when I try to add this function inside my app.js (using laravel mix), I've got some weird errors.. Example: app.js:19980 Uncaught TypeError: Cannot set property 'ht' of undefined
The problem seems to be the "this" scope I guess
Here is what's look like my app.js
require('./bootstrap');
import 'alpinejs';
window.productTaxesCalculator = () => {
return {
ht: 0,
tva: 0,
ttc: '',
calculate: () => {
this.ttc = (this.ht + (this.ht * (this.tva / 100))).toFixed(2);
},
init: (ht, tva) => {
this.ht = parseFloat(ht);
this.tva = parseFloat(tva);
this.calculate();
}
}
}
What did I miss ? How can I fix that problem ?
Thanks
Level 102
Actually this might work
window.productTaxesCalculator = function () {
return {
ht: 0,
tva: 0,
ttc: '',
calculate: () => {
this.ttc = (this.ht + (this.ht * (this.tva / 100))).toFixed(2);
},
init: (ht, tva) => {
this.ht = parseFloat(ht);
this.tva = parseFloat(tva);
this.calculate();
}
}
}
}
Level 41
@sinnbeck No it's not working :/
and btw console.log(e) return undefined
Level 102
.. Please to give some more feedback than "Its not working". Do you get the same error? And did you test my console.log thing?
Level 41
@sinnbeck Sorry, yes exact same mistake and console.log(e) returns undefined
Level 41
@sinnbeck I digged into the js file ouputed by Laravel mix and here is the function... this is prefixed with _
this must be the problem here but don't know how to solve it
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var alpinejs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! alpinejs */ "./node_modules/alpinejs/dist/alpine.js");
/* harmony import */ var alpinejs__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(alpinejs__WEBPACK_IMPORTED_MODULE_0__);
__webpack_require__(/*! ./bootstrap */ "./resources/js/bootstrap.js");
window.productTaxesCalculator = function () {
var _this = this;
return {
ht: 0,
tva: 0,
ttc: '',
calculate: function calculate() {
_this.ttc = (_this.ht + _this.ht * (_this.tva / 100)).toFixed(2);
},
init: function init(ht, tva) {
_this.ht = parseFloat(ht);
_this.tva = parseFloat(tva);
_this.calculate();
}
};
};
/***/ }),
Level 102
Does it work if you add blacklist: ["useStrict"] to your .babelrc and recompile?
Level 41
@sinnbeck Not sure how to do that, I've created a .babelrc file and add this:
{
"plugins": [
"@babel/plugin-transform-strict-mode"
]
}
still got the same exact error
Level 102
Ah sorry seems to have been removed in babel 6
Level 1
Hi, can you try to change x-init with this:
x-init="() => { init(X, Y) }"
1 like
Level 41
@chack1172 Tried it and I've got the same exact errors
Level 1
ok, what if you first save the object in a variable and then return it?
Level 41
Ok thank you everyone for helping but I've found out...
The fat arrows function where the problem, I used normal function and the scope was working.
Please or to participate in this conversation.