Recent

Author Topic: Vue.js with Pas2JS  (Read 998 times)

lainz

  • Hero Member
  • *****
  • Posts: 3270
    • Lainz
Vue.js with Pas2JS
« on: May 05, 2019, 02:06:55 am »
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]
  1. program pas2jsvue;
  2.  
  3. {$mode objfpc}
  4.  
  5. uses
  6.   JS,
  7.   Classes,
  8.   SysUtils,
  9.   Web;
  10.  
  11. type
  12.  
  13.   function newVue(obj: TJSObject): TJSObject; external Name 'newVue';
  14.  
  15.  
  16. var
  17.   app: TJSObject;
  18.  
  19. begin
  20.   // Your code here
  21.   app := newVue(
  22.  
  23.   new([
  24.   'el', '#app',
  25.   'data', new([
  26.     'message', 'Hello Vue!']),
  27.   'methods', new([
  28.     'reverseMessage', 'FUNCTION HERE'])
  29.   ])
  30.  
  31.   );
  32. end.

Code: Text  [Select]
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>Pas2JS Vue</title>
  6. </head>
  7. <body>
  8.   <div id="app">
  9.   <p>{{ message }}</p>
  10.   <button v-on:click="reverseMessage">Reverse Message</button>
  11.   </div>
  12.   <script src="./vue.min.js"></script>
  13.   <script src="./pas2jsvue.js"></script>
  14.   <script>
  15.   function newVue(obj) {
  16.     console.log(obj)
  17.     return new Vue(obj)
  18.   }
  19.   rtl.run();
  20.  
  21.   </script>
  22.  
  23. </body>
  24. </html>  

mattias

  • Administrator
  • Full Member
  • *
  • Posts: 142
    • http://www.lazarus.freepascal.org
Re: Vue.js with Pas2JS
« Reply #1 on: May 06, 2019, 12:27:00 pm »
Code: Pascal  [Select]
  1. new([  'reverseMessage', @OnReverseMessage ]); // method
  2. new([  'reverseMessage', procedure begin ... end ]); // anonymous function
  3.  


lainz

  • Hero Member
  • *****
  • Posts: 3270
    • Lainz
Re: Vue.js with Pas2JS
« Reply #2 on: May 07, 2019, 03:55:58 am »
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]
  1. reverseMessage: function () {
  2.       this.message = this.message.split('').reverse().join('')
  3.     }

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

  • Hero Member
  • *****
  • Posts: 3270
    • Lainz
Re: Vue.js with Pas2JS
« Reply #3 on: May 11, 2019, 04:28:07 pm »
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]
  1. app := newVue(
  2.  
  3.   new([
  4.   'el', '#app',
  5.   'data', new([
  6.     'message', 'Hello Vue!']),
  7.   'methods', new([
  8.     'reverseMessage', procedure
  9.     begin
  10.       asm
  11.       this.message = this.message.split('').reverse().join('')
  12.       end
  13.     end])
  14.   ])
  15.  
  16.   );

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

  • Hero Member
  • *****
  • Posts: 3270
    • Lainz
Re: Vue.js with Pas2JS
« Reply #4 on: May 12, 2019, 10:45:53 pm »
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
« Last Edit: May 25, 2019, 02:40:00 pm by Lainz »

mattias

  • Administrator
  • Full Member
  • *
  • Posts: 142
    • http://www.lazarus.freepascal.org
Re: Vue.js with Pas2JS
« Reply #5 on: May 30, 2019, 09:34:52 am »
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]
  1. reverseMessage: function () {
  2.       this.message = this.message.split('').reverse().join('')
  3.     }

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

  • Hero Member
  • *****
  • Posts: 3270
    • Lainz
Re: Vue.js with Pas2JS
« Reply #6 on: May 31, 2019, 02:21:11 am »
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.
« Last Edit: May 31, 2019, 02:28:38 am by Lainz »