Tuesday, December 24, 2019

The example of calling server-side API functions

Here is the simple example of calling server-side API functions that are written in JavaScript. The back-end team used Sequelize ORM package on Node.js. Also, we've created the client-side API that used Axios package to call server-side functions (from controllers).

1) Here is the screen shot of list component, which content we got by calling server-side API:

2) The code snippets:

- The part of code from client API (lines 12 and 24):

- The part of code from .vue list component (lines 4 and 18):

Saturday, December 14, 2019

Using Dynamical components in Vue.js

What is Dynamic component?

The Dynamic components (<component :is="...".../>) in Vue.js enable users to switch between two or more components without routing, and even retain the state of data when switching back to the initial component (<keep-alive>). The central idea is to let users dynamically mount and unmount components in the user interface without using routers.

Bellow is an example of using dynamical components in our project.

As you can see on the screen shot below (click on it to make it larger), there is a stack of collapsible components on the left side. We use dynamical component feature to load them (code line 85).

The code of main container component: