How to do instant filter using vuejs and typescript

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.

Internationalization in vuejs, vue cli, spa

Multi language support in vuejs application can easily achieved by using the vuei18n plugin.
All you need to do is just  follow below steps.
My base app is created using vue cli you can





check the details here how to create vue cli app Vue CLI

Step 1:
Include the vue18n plugin in your package.json file dependencies section
"vue-i18n": "8.4.0"
next step is yarn/npm install of the same to your project.

Step 2: Create a resources.ts file in src folder.

export const resources = {
    en : {
        company_name: 'JuggerNaut',
    },
    ml : {
        company_name: 'ജഗ്ഗർനട്ട്',
    },
    cn : {
        company_name: '剑圣',
    },
};

Step 3:

Now in main.ts add the reference for resource and vue-18n libraray

import VueI18n from 'vue-i18n';
import {resources} from '@/i18n/resources';
Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: 'en', // set locale
  messages: resources, // set locale messages
});

I have added the default language as 'en'
Now include it in the Vue instance creation part like below
new Vue({
  router,
  i18n,
  render: (h) => h(App),
}).$mount('#app');

Step 4:
That's it the configuration part is done now we can go to the components and use it.

I am biding the company name inside my html. this can be converted like below using resource file.

<li><a href="#">{{$t('company_name')}}</a></li>

If you want to use inside your component you can use it like below.

const companyName = this.$t('company_name') as string;

And if you want to change the language dynamically just set like below in your component

this.$i18n.locale = 'ml';

It will convert to that corresponding language.

Dependency Injection in vuejs, Vue Cli Single Page Application


We can use DI in vuejs application by very simple way, using the @Provide and @Inject property decorator.So here is the scenario you have a service and you need the instance of the same in different component in normal way you have to create the instance of the same in different components and use it there.

But using DI you can use the @Provide property decorator and declare it in your App.vue and then you can reuse it in the components wherever you want by using the @Inject property decorator

In App.vue

    import {Component, Provide, Vue} from 'vue-property-decorator';
    @Component({
    })
    export default class App extends Vue {
           @Provide('vueApiServices')
           public vueApiServices = new VueApiServices();
     }
In your corresponding component

import { Vue, Prop, Component, Inject } from 'vue-property-decorator';
import {VueApiServices} from '../../services/VueApiServices';
@Component({
    components: {},
})
export default class InventoryDetailsComponent extends Vue {

@Inject('vueApiServices')
private vueApiService!: VueApiServices;
}