DEV Community: Zahid Jabbar

Image Binding Error Handling in Vue.js

Zahid Jabbar — Wed, 19 Feb 2020 19:51:05 +0000

🐛 We all know that broken images don't look good and they give a very bad user experience.

👉 I was working on a project and instead of showing an alt text if the image is broken, I wanted to show some other alternate image. For this, first, I needed to check if the image is broken then show the alternate image.

👀 I looked for solutions and some people were doing it by styling broken images which is also good but this was not the solution I was looking for.

🙌 I came to know about @error event on images and this proved really helpful.

👨‍💻 Let's explore this with a code example:

😕 without `@error`

If we don't use @error and just provide the alt text, it looks ugly.



<template> 
    <img class="image" :src="source" alt="mountains" > 
</template>

😍 with `@error`

By using the @error event on images, we can show the alternate image if the original image is broken or not loaded for any reason. @error will only call the provided method if there is any error in loading the original image.



<template> 
    <img class="image" :src="source" @error="setAltImg" alt="mountains" > 
</template>

imgUrlAlt is the method that sets the image's src to alternate image.



setAltImg(event) { 
    event.target.src = "working-image.jpg" 
}

💯 Conclusion

I really liked achieving the same thing in 3-5 lines with @error and avoiding writing extra 10-15 lines of CSS.

👋 Say Hi

I am quite active on Twitter you can follow me there or visit my Blog to know more about me.

Two-way binding in Vue.js

Zahid Jabbar — Tue, 04 Feb 2020 19:39:52 +0000

🗣If you're following my blog posts, you already know that for the past few weeks I am exploring Vue.js and along with it I am also documenting my journey. So, today's post is about the v-model directive in Vue.js.

👉 For the two-way binding, Vue provides v-model directive, let's explore it in depth:

♻️ v-model:

The v-model directive helps us create a two-way binding on form inputs <input>, textarea <textarea>, and select elements <select>.

Binding to `<input>` element:

Let's suppose we have a data property named data and we can bind it with v-model on the input element like this

<input v-model="book" placeholder="What's your favorite book?">
<p>Your Favorite book is: {{ book }} </p>

Binding to `<textarea>` element:

Binding message data property with v-model

<textarea v-model="message" placeholder="Share your message"></textarea>
<p>Message: {{ message }}</p>

Binding to `<select>` element:

Binding selected data property with v-model

select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Selected: {{ selected }}</span>

Vue also provides some modifiers for the v-model directive that sometimes makes life easier 😅

Modifiers

.lazy
By default v-model sync the input with the data after each input event but by using v-model.lazy we can restrict it to only after the change event.

.trim
This modifier is used when we want to trim whitespace from user input.

.number
When we want to automatically typecast user input as a number we use v-model.number and it trims the whitespace.

P.S: Your feedback helps me improve myself and motivates me to share more content.

👋 Say Hi

I am quite active on Twitter you can follow me there or visit my Blog to know more about me.

Difference between v-if and v-show in Vue.js

Zahid Jabbar — Tue, 14 Jan 2020 20:47:17 +0000

🔍 v-if and v-show are Vue.js directives and they are used to show the information depending upon certain conditions that are defined by the user

👉 In case you're not familiar with Vue.js directives, they are just like HTML attributes but they're always prefixed with v- which is the indication that they're special attributes provided by Vue.js. They apply reactive behavior to DOM.

👨‍💻 Let's learn the difference between two with some code:

v-if

Let's suppose we have this piece of code

<div id="app">
  <span v-if="show">Learning about v-if</span>
</div>

var app = new Vue({
  el: '#app',
  data() {
    return {show: false}
  }
})

In the v-if case, the element will only be rendered and inserted into DOM if the condition is true. If the condition is false and we check the DOM elements in the browser we'll notice that there is no element. But as we turn the condition to true, it's added to DOM. So, each time, depending upon the condition, there are DOM manipulations.

v-show

<div id="app">
  <span v-show="show">Learning about v-show</span>
</div>

var app = new Vue({
  el: '#app',
  data() {
    return {show: false}
  }
})

The element With v-show will always be rendered and it is present in the DOM but the CSS property Display: none will be toggled by v-show depending upon the condition.

🤔Which to use?

There are different use cases for both. As we've learned that with v-if the element unmount and remount depending upon the condition and there is so much work to do for DOM manipulations. But with v-show it just stays in the DOM there is not much work to do, so it's more performant.

Methods, Watchers and Computed Properties in Vue.js

Zahid Jabbar — Mon, 16 Dec 2019 20:48:05 +0000

🎯If you're interested in learning Vue.js all you need is open its documentation and you are ready to start working with Vue.js and develop cool apps. It is so beautifully written that a person who knows HTML, CSS and JavaScript finds no hurdles getting started with Vue.js and this is what makes Vue.js amazing.

👨‍💻As I've started learning Vue.js and I am also documenting my journey. So today's post is about methods, watchers and computed properties in Vue.js. Let's explore them.

Methods:

Methods are just like simple functions and are bound to Vue instance, they are used just like other normal functions.

Computed Properties:

Computed properties are a little bit different from methods as they execute just like normal functions. They, in simple words, are calculations that will be cached and will only be updated when their dependencies change.

Let’s suppose we have a logic that runs heavy calculations and when you run this piece of code their dependency is not changing it's better to use computed properties because with them you don’t need to keep rerunning those heavy calculations every time something changes in the DOM or virtual dom.

The thing to understand about computed properties is that it’s a different view of the data. As if you are taking the data, playing with it, and giving something different to the user. Computed properties don’t affect the original data. According to Sara Drasner, computed properties are highly performant but should be used with understanding.

P.S: We don’t run computed properties as if they are functions but as if they are data properties. Although the declaration is like functions.

Watchers:

Watchers, no doubt, are similar to methods but there the difference lies in their usage. Watchers are good for asynchronous updates and transitions with data change.
Watchers are declared the same way as methods and computed properties but the name of watcher should be the same of property you want to watch.

📖I am learning these topics. If you think I am missing something or perceiving something wrong, kindly let me know.

Peace✌️

Getting started with Vue.js

Zahid Jabbar — Wed, 11 Dec 2019 20:10:57 +0000

Being a developer, I was noticing that there is so much hype about Vue.js in the dev community. I've worked with React.js and I love this amazing JavaScript library. I kinda regret that I could not document my React.js learning journey but this time I'm going to document each and everything about Vue.js.

📝 I believe in learning by doing, so I'll be building a small todo app with Vue and in this blog post, I'm going to document about that. Let's start!

📦 Install @vue/cli

With the help of Vue CLI, we'll be creating our first project together, a todo app. Vue CLI is an npm package and it provides the Vue commands in your terminal. With the help of Vue CLI, you can quickly prototype with vue serve and vue build commands

Node Version Requirement

While working with Vue CLI you've to have Node.js version 8.9 or above (8.11.0+ recommended). You can manage multiple versions of Node on the same machine with nvm or nvm-windows.

💻 Start building

First install Vue CLI by running these commands

$ npm install -g @vue/cli-service-global
//or
$ yarn global add @vue/cli-service-global

To create a new project, run:

$ vue create ToDo

After running the above command you will be prompted to pick a preset. Choosing preset totally boils down to developer choice. Default preset is good for quick prototyping but ofcourse you can choose manually, if you want to.

$ cd ToDo

Open the project in your editor and in component folder delete the HelloWorld.vue and create a file named Todo.vue and paste this piece of code in it.

<template>
  <div>
    <h1>{{ msg }}</h1>
    <p>Here you can manage your daily activites</p>
    <div class="container col-sm-12 col-md-8 col-lg-6 mt-5 justify-content-center">
      <b-row class="justify-content-center">
        <b-input-group class="shadow" prepend="Item">
          <b-form-input
            v-model="task"
            @keyup.enter="addItem"
            range="true"
            type="text"
            placeholder="Enter here"
          ></b-form-input>
          <b-input-group-append>
            <date-picker
              v-model="date"
              lang="eng"
              format="YYYY-MM-DD"
              value-type="date"
              type="date"
            ></date-picker>
            <b-button @click="addItem" variant="info">+</b-button>
          </b-input-group-append>
        </b-input-group>
      </b-row>
      <div class="container mt-4">
        <b-row
          class="items mb-1 justify-content-center shadow"
          v-for="(item,index) in tasks"
          :key="{index}"
        >
          <div class="w-100 d-flex justify-content-between">
            <div>
              <div class="ml-3 p-2">
                <span v-if="item.dueDate" class="item--date">{{item.dueDate.toDateString()}}</span>
                <span v-else class="item--date">No Due Date</span>
                <span>{{item.dueTask}}</span>
              </div>
            </div>
            <div>
              <b-button @click="removeItem(index)" class="rounded p-2" variant="primary">Remove</b-button>
            </div>
          </div>
        </b-row>
      </div>
    </div>
  </div>
</template>

<script>
import DatePicker from "vue2-datepicker";
export default {
  components: {
    DatePicker
  },
  name: "Todo",
  props: {
    msg: String
  },
  // data for app
  data() {
    return {
      id: 0,
      task: "",
      tasks: [],
      date: ""
    };
  },

  methods: {
    //method for adding item
    addItem() {
      if (this.task) {
        this.tasks.push({
          dueTask: this.task,
          dueDate: this.date
        });
      } else {
        alert("Enter Item");
      }
      this.task = "";
      this.date = "";
    },
    //method for removing item
    removeItem(index) {
      this.tasks.splice(index, 1);
    }
  }
};
</script>

<!-- Custom Scoped Styles -->
<style scoped>
.row {
  margin-right: 0;
  margin-left: 0;
}
.bg-success {
  background-color: #d9e75d !important;
}
.item--date {
  margin-right: 50px;
  color: rgb(77, 9, 145);
  border-bottom: 1px dotted rgb(77, 9, 145);
  background-color: rgb(230, 247, 156);
}
.mx-datepicker {
  max-width: 118px;
}
</style>
<!--Custom styles -->
<style >
.mx-input-wrapper {
  height: 100%;
}
.mx-input {
  width: 100%;
  height: 100% !important;
  border-radius: 0px !important;
}
</style>

Go in App.vue component and change code in your script tag and paste this piece of code.

import ToDo from "./components/ToDo.vue"

export default {
  name: "app",
  components: {
    ToDo,
  },
}

I'm using vue2-datepicker for date picking purpose and you can read more about this package here and for installing this package run:

$ npm install vue2-datepicker --save

I'm using bootstrap, so install bootstrap-vue by running this command:

npm install vue bootstrap-vue bootstrap

If you're done with installing packages the last step is to go to main.js file and paste this code:

import Vue from "vue"
import App from "./App.vue"
import BootstrapVue from "bootstrap-vue"
import "bootstrap/dist/css/bootstrap.css"
import "bootstrap-vue/dist/bootstrap-vue.css"

Vue.use(BootstrapVue)
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount("#app")

🎉 Congratulations, you just built a todo app. Go and run:

npm run serve

Now visit localhost to see your todo app.

You can see complete code at this GitHub Repo.
If you've any questions or feedback, message me on Twitter. I'd love to hear from you.

Peace ✌️

DEV Community: Zahid Jabbar

Image Binding Error Handling in Vue.js

😕 without @error

😍 with @error

💯 Conclusion

👋 Say Hi

Two-way binding in Vue.js

♻️ v-model:

Binding to <input> element:

Binding to <textarea> element:

Binding to <select> element:

Modifiers

👋 Say Hi

Difference between v-if and v-show in Vue.js

v-if

v-show

🤔Which to use?

Methods, Watchers and Computed Properties in Vue.js

Methods:

Computed Properties:

Watchers:

Getting started with Vue.js

📦 Install @vue/cli

Node Version Requirement

💻 Start building

😕 without `@error`

😍 with `@error`

Binding to `<input>` element:

Binding to `<textarea>` element:

Binding to `<select>` element: