Solving Common Vue Problems — Props and Routes, and More
By: John Au-Yeung
Tags: Technology, Programming, Software Development, Web Development, JavaScript

Photo by Diego Jimenez on Unsplash

Vue.js makes developing front end apps easy. However, there are still chances that we’ll run into problems.

In this article, we’ll look at some common issues and see how to solve them.

Passing Props to Vue Components Instantiated by Vue Router

We can pass props to the component that are instantiated by Vue Router by passing our props straight into router-view .

For example, we can write:

<router-view :prop="value"></router-view>

Then in our components, we write:

props: {

prop : String

},

Then our component can access the prop prop.

The type of prop is a string, so we can pass a string to router-view and access them in the route components with this.prop .

Difference Between the Created and Mounted Events

The created hook is run before all of the components is loaded.

The DOM hasn’t been mounted or added, so DOM manipulation can’t be done on the created hook.

mounted is run after the DOM has been rendered.

So we can access DOM elements in there with refs.

Adding Debounce for Events

We can delay the execution of event handlers by using the debounce NPM package by writing:

<input @input="debounceInput"> methods: {

debounceInput: debounce(function (e) {

this.$store.dispatch('updateValue', e.target.value)

}, 200)

}

We can use debounce by using the debounce function from the package.

The function that we pass inside will run after a given amount of time.

We passed in 200 in the second argument, so the function is delay 200 milliseconds.

We can also use the debounce Lodash method, we can write:

<input @input="debounceInput"> methods: {

debounceInput: _.debounce(function (e) {

this.$store.dispatch('updateValue', e.target.value)

}, 200)

}

Then we get the same result.

Hide Vue.js Syntax While the App is Loading

To hide the Vue.js template syntax while the app is loading, we can use the v-cloak directive.

For instance, we can write:

<div v-cloak>{{ text }}</div>

The v-cloak attribute will be added to the div when the app is loading.

Therefore, we can hide the code while it’s loading with CSS.

So we can hide it with CSS:

[v-cloak] { display: none; }

Get Selected Option on Change

We can get the selected option on change by passing in the $event object to an event handler.

For example, we can write:

<select name="fruit" @change="onChange($event)" v-model="key">

<option value="apple">apple</option>

<option value="orange">orange</option>

</select> <script>

const vm = new Vue({

data: {

key: ""

},

methods: {

onChange(event) {

console.log(event.target.value)

}

}

}

</script>

We have the onChange method that takes an event object.

Then we can pass in $event and get the selected value with event.target.value .

Reset a Component’s Initial Data

We can reset a Vue component’s to the initial data by getting the initial data with this.$data

For instance, we can write:

data(){

return {

foo: 'foo',

bar: 'bar',

initialData: undefined

}

},

ready(){

this.initalData = this.$data;

},

methods:{

resetWindow(){

this.$data = this.initalData;

}

}

When the component loaded the data, we set the this.initialData state to this.$data .

this.$data has the data that’s returned by the data method.

Now when we want to reset the component data to the initial data at any point, we can set this.initialData to this.$data to reset the data to the original data.

Reference Static Assets

We can use the @ symbol to get the path of the src folder.

Therefore, we can write:

<img src="@/assets/images/pic.png"/>

to access the assets folder, which is inside the src folder.

Set the title Tag’s Content

To set the title tag’s content, we can use the vue-headful library.

To use it, we write:

import Vue from 'vue';

import vueHeadful from 'vue-headful';



Vue.component('vue-headful', vueHeadful);

...

to register the vue-headful component so that we can use it in our components.

Then we can write:

<template>

<div>

<vue-headful

title="Title"

description="Description"

/>

</div>

</template>

We set the title tag’s content with the title prop.

The description sets the meta tag’s description attribute's value.

Photo by Dragos Gontariu on Unsplash

Conclusion

We can pass props to router-view and the data can be accessed in the components instantiated with Vue Router.

We can set the title and meta tags with the Vue Headful library.