Handling Edge Cases

Rubleen Kaur
Last Updated: May 13, 2022

Introduction

In this article, we will be discussing the handling of edge cases. These edge cases are unusual situations that require some breaking or mending of VueJs rules. These edge cases have their disadvantages and can be dangerous for your applications. 

The best way to avoid reaching into a different component or an instance is to manipulate DOM manually. This can, at times be appropriate in a few cases.

Accessing the Root Instance

For each subcomponent of a brand new Vue Instance, the root instance can be accessed using the $root property. Let’s take a look at how we can use them,

// The root Vue instance.
new Vue({
  data: {
    foo: 1
  },
  computed: {
    bar: function () { /* ... */ }
  },
  methods: {
    baz: function () { /* ... */ }
  }
})

 

We can access the instance and we can use it as a global store:

// Get root data.
this.$root.foo

// Set root data.
this.$root.foo = 4

// Access root computed properties.
this.$root.bar

// Call root methods.
this.$root.baz()

 

Accessing the Parent component Instance

 

As we use the $root and the $parent property, we can use the access of the parent instance from a child. This is a lazy alternative to pass the data through a prop. There are cases, and we can share the component libraries. For example, when we use the abstract components that interact with Javascript APIs instead of rendering HTML, we can use these hypothetical Google Maps components. This can be used to overcome the edge case discussed,

<google-map>
  <google-map-markers v-bind:places="CodingNinjas"></google-map-markers>
</google-map>

 

The above <google-map> component might define a map property that all subcomponents need access to. In our case, the marker tag can access the map with some functions like this.$parent.getMap. This is done for getting in order and to add a few sets of markers to it, 

Accessing the Child Instance and Child Elements

There can be an edge case where, the existence of the props and events, can at times still require you to access a child component in Javascript directly. This can be done by assigning a reference ID to the child component by the use of the ref attribute. For example,

<base-input ref="ninjaname"></base-input>

To use the ref defined above, we can use 

this.$refs.ninjaname

Now, the next part is to access the <base-input> instance. This is useful when we need to focus on the inputs from the parent. 

<input ref="input">

And we can even define methods for use by the parent,

methods: {
  // Used to focus the input from the parent
  focus: function () {
    this.$refs.input.focus()
  }
}

 

Dependency Injection

Let’s discuss an example of the google-map component again,

<google-map>
  <google-map-region v-bind:shape="city">
    <google-map-markers v-bind:places="ninjas"></google-map-markers>
  </google-map-region>
</google-map>

 

In the component discussed above, all the descendants of the google-map tag needed access to a getMap method to keep track of which map they should interact with. We cannot use the parent property as it didn’t scale well to the more deep nested components. This is where we can use dependency injection, and we can use two new instance options: provide and inject.

The provided options are useful to specify the data/methods to be provided to descendent components. In our case, that’s the getMap method inside <google-map>:

provide: function () {
  return {
    getMap: this.getMap
  }
}

Then, in any descendants, inject option is used to receive specific properties that we can add to the instance:

inject: ['getMap']

Now, why do we use this? The advantage of using this over the $parent is that we can access the getMap in any descendant component without exposing the entire instance of google-map. This makes our development safer and without fear that we might need to change a child component, it is relying upon.

Controlling Updates 

Vue’s Reactivity System is always known to update the components quickly. But there are a few edge cases when you might want to force an update even though there is no reactive change in the data. Then we can also have a scenario where you might want to prevent unnecessary updates.

Forcing an Update

As Vue is known for automatically updating the code, if this does not happen for you, there is a 99% chance that you have made a mistake somewhere in the code. But if you want to manually force an update in Vue due to an edge case, you can do so using the $forceUpdate.

Cheap Static Components using v-once 

To render simple plain HTML elements is very fast in Vue, but there can be times you want to include a component that contains static data. In such an edge case, you can make sure that the component is only evaluated once and then is cached by adding the v-once directive to the root element, for reference go through the example given below,

Vue.component('Contact Me', {
  template: `
    <div v-once>
      <h1>Contact Me</h1>
      ... a lot of static content ...
    </div>
  `
})

 


We should avoid the use of this pattern. The method discussed above is for rare cases when you need to render a huge amount of static information on the application. 

FAQs

  1. What are Edge Cases in Vue?
    The handling of edge cases, these are unusual situations that require some breaking or mending of VueJs rules. These edge cases have their disadvantages and can be dangerous for your applications. 
     
  2. What is the $parent in VueJs?
    The parent component in VueJs is the component that embeds another component.
     
  3. How can you force an update in VueJs?
    As Vue is known for automatically updating the code, if this does not happen for you, there is a 99% chance that you have made a mistake somewhere in the code. But if you want to manually force an update in Vue due to an edge case, you can do so using the $forceUpdate.
     

Key Takeaways

Hey everyone, so let's brief about the article describing an overview of handling edge cases in the VueJs application.

  • This article covers edge cases in Vuejs and how you can handle them.
  • We have further discussed how to access the parent, root, and child components in such edge cases in VueJs.
  • Further, we have seen what are dependency injection, how we can control updates and force an update in our VueJs application during uncertain edge cases.

Isn’t Web Development engaging? Building new websites and using amazing animations and different APIs, don’t be scared if you cannot grasp the hold of this vast development. We have the perfect web development course for you to make you stand out from your fellow developers. 

Happy Learning Ninjas!
 

Was this article helpful ?
0 upvotes