Vue.js with Pas2JS
lazarus / 76-Pas2JS

----------------------------------------------------------------------
lainz · 2019-05-05 00:06

Hi, I need to put a function inside an object, I get Vue.js working
with this code, but as you can see I have no idea on how to add a
function inside an object. See 'FUNCTION HERE' part.

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i program
pas2jsvue; {$mode objfpc} uses  JS,  Classes,  SysUtils,  Web; type  
function newVue(obj: TJSObject): TJSObject; external Name
'newVue';  var  app: TJSObject; begin  // Your code here  app :=
newVue(   new([  'el', '#app',  'data', new([    'message', 'Hello
Vue!']),  'methods', new([    'reverseMessage', 'FUNCTION HERE']) 
])   );end.
Code: Text  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i <!doctype
html><html lang="en"><head>  <meta charset="utf-8">  <title>Pas2JS
Vue</title></head><body>  <div id="app">  <p>{{ message }}</p> 
<button v-on:click="reverseMessage">Reverse Message</button>  </div> 
<script src="./vue.min.js"></script>  <script
src="./pas2jsvue.js"></script>  <script>  function newVue(obj) {   
console.log(obj)    return new Vue(obj)  }  rtl.run();   </script> 
</body></html>

----------------------------------------------------------------------
mattias · 2019-05-06 10:27

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i new([
 'reverseMessage', @OnReverseMessage ]); // methodnew([
 'reverseMessage', procedure begin ... end ]); // anonymous function

----------------------------------------------------------------------
lainz · 2019-05-07 01:55

Thankyou mattias, I must find a way to use vue with pas2js classes,
else it will not have much sense.

For example in that method I must call

Code: Javascript  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i
reverseMessage: function () {      this.message =
this.message.split('').reverse().join('')    }
Seems that in vue to any function the "this" is filled with the data,
and maybe methods as well.

So in these method I must be able to use this, with the variables at
least. I'm learning vue right now.

----------------------------------------------------------------------
lainz · 2019-05-11 14:28

I can't find a way to use 'this', it says not found, it's part of
every function in JavaScript, so anything can be binded to a function
as this parameter, in this case all the variables and other functions
are binded.

So I used asm block, but is not the idea since I can't use Pascal with
Vue.js doing like this:

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i app :=
newVue(   new([  'el', '#app',  'data', new([    'message', 'Hello
Vue!']),  'methods', new([    'reverseMessage', procedure    begin   
 asm      this.message = this.message.split('').reverse().join('')   
 end    end])  ])   );
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

This is possible with Pas2JS? The use of 'this' operator, with *any*
parameter as valid? Or there's a way to define them?

----------------------------------------------------------------------
lainz · 2019-05-12 20:45

Anyone? =)

Well, seems that is best to use Pas2JS like in the demo folder,
creating the components by code and not with HTML. At least for now...
so bye bye vue with pas2js.

Edit: the same hello world app made with pure pas2js
https://forum.lazarus.freepascal.org/index.php/topic,45522.0.html

----------------------------------------------------------------------
mattias · 2019-05-30 07:34

Quote from: Lainz on May 07, 2019, 03:55:58 amThankyou mattias, I must
find a way to use vue with pas2js classes, else it will not have much
sense.

For example in that method I must call

Code: Javascript  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i
reverseMessage: function () {      this.message =
this.message.split('').reverse().join('')    }
Seems that in vue to any function the "this" is filled with the data,
and maybe methods as well.

So in these method I must be able to use this, with the variables at
least. I'm learning vue right now.

Unit js provides variable "JSThis".
I recommend defining Pascal types for the "new" objects, to avoid the
many type casts.

----------------------------------------------------------------------
lainz · 2019-05-31 00:21

Thanks. Yes I'm sure doing it the Pascal OOP way instead of using vue
library will be the way to go with pas2js.

Edit: I also did the same vue example with "pure" pas2js
https://forum.lazarus.freepascal.org/index.php/topic,45522.0.html

I'm sure there are replacements for all vue or angularjs / react
functionality out there, I must just google for it.

I'm sure also that vue can be used, but my knowledge of pas2js is very
limited right now, even if you helped me a lot will be the same until
I get more time working on it.