{"id":37224,"date":"2018-07-11T03:39:20","date_gmt":"2018-07-11T10:39:20","guid":{"rendered":"https:\/\/www.exoplatform.com\/blog\/?p=16666"},"modified":"2018-07-11T03:39:20","modified_gmt":"2018-07-11T10:39:20","slug":"use-vue-js-hooks-within-exo-portlet","status":"publish","type":"post","link":"https:\/\/www.exoplatform.com\/blog\/use-vue-js-hooks-within-exo-portlet\/","title":{"rendered":"How to use Vue.js hooks within exo portlet"},"content":{"rendered":"

In my previous post<\/a>, I detailed some techniques for bringing up a few reactive concepts  for eXo<\/a>. This post is sort of part 1.1; it\u2019s a continuation on the subject of View.js\u2019s hooks and methods handling. All of the source code discussed in this article is located here<\/a>.<\/p>\n

More Advanced Concept<\/h2>\n

In the previous example, we had a simple form<\/u><\/a> with two radio options for choosing which GitHub branches<\/strong> we want to display commits for. However, it is common for forms to have multiple buttons performing different actions but sharing some input fields. Now let\u2019s try to improve the form with a field that lets you indicate the name of the git branch you want to inspect and a button that loads the commits of this branch from your GitHub project<\/strong>.<\/p>\n

\"How<\/h2>\n

Working with methods<\/h2>\n

In any web application<\/strong> we need to output data based on certain rules or logic; thus, it might be handy to have a function in which we can embed JavaScript<\/strong> logic. Or perhaps we want to fetch data from a remote service or something similar.<\/p>\n

Within Vue.js<\/a>, functions have to be added under the methods<\/strong> property. I see you’ve noticed<\/a> the term \u201cproperty\u201d; well, in Vue.js<\/strong>, JavaScript functions are called in the context of an object that can operate on the data contained within the object. The object itself is the Vue instance.<\/p>\n

The following snippet illustrates how methods in Vue.js is used :<\/p>\n

new Vue({\nel: '#app',\ndata: {\ncurrentBranch: 'master'\n},\nmethods: {\n\n}\n});\n<\/pre>\n
Methods can be used for various things, but for now I want the method to build the full URL to my GitHub project<\/strong> when I select a branch:<\/p>\n
new Vue({\nel: '#app',\ndata: {\ncurrentBranch: 'master',\nrepositoryUrl: 'https:\/\/github.com\/blogs\/vuejs'\n},\nmethods: {\nbuildCurrentBranch: function() {\nreturn this.repositoryUrl + ' ' + this.currentBranch;\n}\n}\n});\n<\/pre>\n
So by writing this<\/strong>.repositoryUrl<\/i>, we can access the repositoryUrl<\/i> property within the data object. Note that this<\/strong> is required. Technically speaking, this concept is called proxying.<\/strong><\/p>\n
We could access other methods from within our buildCurrentBranch method by using the same approach, except with a parenthetical at the end to make it a method invocation.<\/p>\n
Alright, so now that we have implemented our method, let\u2019s use it from within our template. This is as easy as you would expect it to be \u2013 simply call your method within a button component or use the mustache pattern as usual:<\/p>\n
<!-- Button Load-->\n<div>\n         <button type=\"submit\" class=\"btn btn-primary\" v-on:click=\"buildCurrentBranch();\">Load commits<\/button>\n<\/div>\n<\/pre>\n
The controller side looks like this:<\/p>\n
<!-- Button buildBranch-->\nbuildCurrentBranch: function () {\n   var self = this\n    $.ajax({\n              type: 'GET',\n              url: apiURL.concat(self.currentBranch),\n             success: function (data) {\n                                                     console.log(data);\n                                                    \/\/ Reload project tree;\n                                                    self.commits = data;\n             },\n             error: function (xhr) {\n                                                    if (xhr.status >= 400) {\n                                                                          console.log(xhr.responseText);\n                                                     } else {\n                                                               alert('error while loading commits. Please try again.');\n                                                     }\n            }\n    });\n\n},\n\n<\/pre>\n
This summarizes the basics of using methods within the Vue instance and how to invoke them from an HTML template.<\/p>\n
Now let\u2019s see how we can combine methods and hooks, but first of all, what\u2019s a hook?<\/p>\n
What are Vues.js hooks ?<\/h2>\n
Hooks are an important part of any serious component framework<\/strong>. You often need to know when your component is created, added to the DOM, updated, or destroyed.<\/p>\n
Vue.js comes up with a set of built-in hooks that developers can use in their components:<\/p>\n