tag: Learn

There are three main ways to store variables and/or react to variable changes in Vue components. data computed Watch for changes in watcher So, how to decide when to use what? (that is 3-in-1 question, I outwit myself) Although these sections look similar, they serve different functions. Evaluate the variables against the following considerations when you are in doubt. Description Data Computed Watcher Store variables Store local variables Computed variables. Can be static, derived from other variables, or can be static functions Does not store variables - only watches them. React to variable value changes Y Y Y Cached? Y Y N/A Scope Local to component Local to component, but can derive/make calculations with variables from props, store, etc. Can watch local or store variables and react to changes Can be referred by <template> Y e.g. {{ myName }} Y {{ myCalcName }} N/A Can be referred by <script> methods Y this.myName Y this.myCalcName N/A Perform action when value changes N N Y Consequence of a value change Change UI to react to change Change UI Perform action - local/vuex Can change other variable values N Y Y See examples below. ...

Vue provides one excellent way and three other alternative ways of getting your components to work together to form one beautiful, seamless application. Let us look at them one by one :) 1. Vuex Yesterday we talked about Vuex and how we (try to) manage vuex variables and local variables in a Vue component. What we did not talk about was how Vuex is the most effective solution for all inter-component communications. ...

Vuex is quite a powerful way of storing variables and sharing them across components, but where do you draw the line? Which variables do you store locally and which of them are shifted to Vuex store? This is the advise I often come across - Get your variables in store; keep component clean and consider future reuse Don’t overdo Vuex. Apply judgment and use store judiciously I find that the code I write oscillates between the two with no practical standard that I can apply across the team. ...

Vue allows us to build out infinite blocks of components that can work together or build on top of another to provide UIs of increasing sophistication. You may have a page or view that loads dozens of components including fields, tabs, charts and so on, and the loading of such components is automatically taken care by Vue. Consider this simple example that uses Vuetify and Vue - Todo view, which is the base view to show to-dos. ...

Search in Vuetify data tables is just beautiful. Define a data table and a search is readily available for you. What else can a human ask for? In fact, data tables were the single biggest reason for me to choose Vuetify about an year back. My long term association with data-driven application means that I am ever-so-dependent on the data table functionality. Many other libraries in the market need you to implement search by yourself. Although not a big deal (the code is highly reusable), it is nice to not worry about yet another feature for once. ...

Let us see how we can easily accumulate requests when user types in a search (or auto-complete) fields and collate them in one go. When implementing the ‘instant search’ fields in Vue, the cycle of events is pretty standard - User keys in characters System keeps getting those characters and sending them to the server for processing System reacts to changes from server and displays search results The same cycle repeats for fields include auto-complete that take user action and return stuff from server. ...

Vue filters provide an excellent way to format data on the UI. Define Vue filters using a filter: block in single file components, or use global filters. Consider the following use cases - Purchase date is stored in yyyy-mm-dd in DB, but you have to display dd-mm-yyyy format Cost data needs to be displayed in currency of user’s locale Apply separators in bill number for better readability These and many more are easily accomplished in Vue filters. Let us consider an example of formatting numbers in currency. ...

You find forms everywhere in a data-driven application. Forms, as a rule, need some validation on the client-side to nudge users to fill in data in line with what we want. These validation are easy to implement in Vue. Consider an example that includes Vuetify for styling the UI - <template> <div> <v-form ref="form" v-model="valid"> <v-layout row wrap> <v-flex xs12></v-flex> <v-flex xs12> <v-text-field v-model="userId" label="Full Name" :rules="[rules.required, rules.min8Chars]" ></v-text-field> </v-flex> <v-flex xs12> <v-text-field v-model="userEmail" label="Enter your e-mail" :rules="[rules.required, rules.email]" ></v-text-field> </v-flex> <!-- not used. demonstrates that user cannot submit form unless valid <v-flex xs12 class="pt-3 text-xs-right"> <v-btn flat outline @click="validateAndDoStuff">Validate</v-btn> </v-flex> --> </v-layout> </v-form> </div> </template> Above is a simple form with two fields - user-id and email. We have specified the validation rules applicable for the fields, and we define those rules in data. ...

Vue router can pass props to the view on invocation. This can be super useful when same views cater to different contexts, and the context is known at the time of clicking URL. Vue router just catches the context and passes it on to the view. For example: if you want to show “My Todos” to all users, and “All Todos” to administrators. Instead of creating two different flavours of the same view, you could incorporate them in one view and pass the context on who clicked the “Todo” link. ...

Vue router has a simple job - receive client-side requests and invoke the view that needs to be rendered in the browser. That is also a powerful job. Typically, this is what you see in a Vue router - // client/router.js import Vue from "vue"; import Router from "vue-router"; import Home from "./views/Home.vue"; // views! import store from "./store/index"; // store (will be used subsequently) Vue.use(Router); export default new Router({ mode: "history", // include URL in browser history base: "/", // base URL. if your app is at "/app", specify here routes: [ { path: "/", name: "home", component: Home, }, { path: "/todo", name: "todo", component: () => import("./views/Todo.vue"), // lazy render }, ], }); Router is simple and self-explanatory. User clicks on a link on the UI that says “/”, she is taken to Home component. She clicks on “/todo” on UI, browser navigates to Todo. ...