Forum > Pas2JS

Vue.js with Pas2JS

(1/2) > >>

lainz:
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  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---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  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---<!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:

--- Code: Pascal  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---new([  'reverseMessage', @OnReverseMessage ]); // methodnew([  'reverseMessage', procedure begin ... end ]); // anonymous function 

lainz:
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  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---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:
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  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---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:
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

Navigation

[0] Message Index

[#] Next page

Go to full version