Create a form using HTML, CSS, and typescript. submit it using REST API.

the form contains text box input controls, dropdowns, number inputs, autoselect, calendar controls.

Video Tutorial

1) Vuejs

2) VueCLI

3) Dot net core web API

4) Typescript, SCSS

Create a dashboard for your app using the apex chart in an easy way.
Video Tutorial

1) Vuejs
2) VueCLI
3) Typescript
4) Apexchart

Suppose you have a grid/ table and you need filter the items in the table based on the input text you enter in the search field. This can be achieved very easily using vuejs

Your input field should look like this

 <input type="text" v-model="filterKey" 
 placeholder="please type the inventroy name you wish to search" />

Here in v-model we are binding the filter key so we can pass that value to the filter method for filtering

You can load the data to the table either using the hard coded models/from your backend apis
Your table should look like this

<table>
   <thead>
   <tr>
     <th v-for="(header,index) in Header" :key="index">
      {{header.name}}
     </th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(data, index) in Filter" :key="index" >
      <td>{{data.name}}/td>
      <td>{{}}</td>
      <td>{{}}</td>
    </tr>
  </tbody>
</table> 

Here the Filter  method in the tr v-for is a computed property it will fetch the filtered data.

public get Filter() {
  if (this.filterKey.length > 0) {
  let data: any = [];
  data =  this.data.filter((rowItem: any) => {
   return rowItem.name.toLowerCase().indexOf(this.filterKey.toLowerCase()) !== -1;
  });
  return data;
  } else {
  return this.data;
  }
}

Here the this.data is the grid data needs to be loaded from api  or hard coded one. I am loading it from the backend api call so not adding it here.

The filter input what user enters we are comparing with each array items and checking if it exists then returning it.

If your looking for a template project for Vue Cli integrated with moviedb you can find it in below git hub repository.

https://github.com/tonytomk/moviemaniac

You can get the api key from movie db by registering there.

In the above github code you need to replace the key in the moviecomponent.

Technologies used : vuejs,typescript,vuecli,bootstrap