HTML 5 does support checkboxes with tri-state (true, false, indeterminate). Indeterminate refers to a state where it is not either checked or unchecked. This works fine, however, once an checkbox moves from indeterminate to true/false, it can not go back to indeterminate. This was when I had to research a bit (and I did not want to use … Continue reading Tristate checkbox in Vue JS
Category: VueJs
Axios, Typescript and Vue 3
In this post, we will aim to create a clean architecture for accessing a rest endpoint, using Axios with Typescript and Vue 3. The key focus here would be to how structure your typescript classes to increase code reuse and isolating the actual axios calls. The approach I follow now is based on building an … Continue reading Axios, Typescript and Vue 3
Child Component Validation using Vuelidate
In this post, we will attempt to validate a form, which contains Child Components while submitting. This is a common scenario that one might face in real life. In this example, we will use the Vuelidate Library for validation. Let us first define the Parent Component. <template> <form @submit.prevent="onManualSubmit"> <label for="name">Name</label> <input id="name" type="text" v-model="name" /> <label for="caption">Caption</label> <input … Continue reading Child Component Validation using Vuelidate
Computed Vs Methods Vs Watch
Computed Properties allows you to define auto calculated properties based on other properties. For example, you could have properties firstName and lastName, from which you could create a new property, fullName, which gets updated each time either firstName or lastName changes. For example, data() { return { firstName: "", lastName: "", }; }, computed: { FullName: function() { return this.firstName.concat(this.lastName); }, } The FullName property would be … Continue reading Computed Vs Methods Vs Watch
Axios Interceptors and Exception Handling
Handling exceptions globally and gracefully is essential part of any application. This reduces the scattered try-catch cases and enable to handle everything from one point. In this article, we will explore how to implement global exception handling when making Api calls in an SPA design. We will use VueJs for demonstration along with Axios packages to assist the Http calls. Axios … Continue reading Axios Interceptors and Exception Handling
Private Routes using VueJs
Quite often in your application, you could come across when certain pages/routes could be accessed by only authenticated users. And then there are other pages, which could be access be any one. I tend to call them by private routes and public routes. Private Routes requires a certain condition to be met, for example, the user needs to be authenticated. … Continue reading Private Routes using VueJs
ByteLanguage.Net 