Common Vue Problems — Imports, Array Updates, and Sharing Code
By: John Au-Yeung
Tags: JavaScript, Software Development, Web Development, Technology, Programming

Photo by Muhammad Ruqiyaddin 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.

Importing Modules Outside a Module

We can add the type attribute with value module to a script tag to indicate that the script is a module.

Then we can import other modules inside it.

However, the best way is to create a project with Vue CLI.

Then we can import modules anywhere.

It’ll be compiled to code that can be run on modern browsers.

Update Data on a Page Without Refreshing

To update a page without refreshing, we update the state variables on a page.

For instance, we can write:

Vue.component('favorite', {

template: '<button type="button" @click.prevent="updateFaviteOption" :class="{ 'is-favorited': isFavorited }">favorite</button>',

props: [

'storeId',

'isFavorited'

],

data() {

return {

isFavorited: false,

data: {}

}

},

methods: {

updateFavoriteOption() {

this.isFavorited = !this.isFavorited;

const res = await fetch('/some/url');

const data = await res.json();

this.data = data;

}

}

});

We just have to add the state variable as a property of the object returned in data .

Then we can update it by assigning values to it as we wish.

Vue and CORS Requests

To make a CORS request work, we have to add the correct headers to our back end app.

We’ve to add the Access-Control-Allow-Origin header, which can be set to * or our site.

Also, we have to set the Access-Control-Allow-Headers header.

We set that to X-Requested-With, Content-Type, Accept, Origin, Authorization .

And we also have to set the Access-Control-Allow-Methods header, which is set to the methods that we allow CORS requests for.

We’ve to add GET, POST, PUT, DELETE, OPTIONS to let all requests be done with a different domain than the server app.

OPTIONS is needed or preflight requests, which lets us know if the request can be made.

The rest of the verbs make the actual request.

Updating Array Doesn’t Update the Page

When we update an array the page might not be updated.

This can happen if we try to update an existing array item with a new value.

To update an existing an array entry and update the page, we’ve to use this.$set .

For example, we can write:

this.$set(this.arr, 0, 9);

in a method.

The first argument is the array.

The 2nd is the index of the item to update.

And the 3rd argument is the argument to update it with.

_this.$store is undefined

We’ll get this.$store is undefined if we used arrow functions instead of a regular function for a method.

Arrow functions won’t bind to the component for this in a component.

So we should use regular functions for any lifecycle hooks or methods.

Pass Props Component to the Root Instance

We can call this.$emit to emit an event and pass data to the parent component.

For instance, we can write:

this.$emit('update', this.name);

in the child component’s methods.

Then we can write:

<child @update="changeName"></child>

in a parent component’s method.

We call the changeName method which has the event object as a parameter.

In the component code, we write:

{

...

methods: {

changeName(name) {

this.getname = name;

}

}

...

}

name has the value that’s passed into the 2nd argument of $emit .

Angular Service Equivalent in Vue

There’s no entity that’s exactly the same as an Angular service in Vue.

If we want to add a stateless service, then we can add a mixin.

If we want to add a stateful service, then we can use Vuex to share data.

Also, we can export values from a module and use them.

We can also use JavaScript global objects, which are shared by all components.

In addition, we can extend the Vue.prototype property to add what we want to a Vue instance.

Then that’ll be available throughout the app.

We can add a mixin with:

const myMixin = {

methods: {

hello() {

console.log('hello')

}

}

} const Component = Vue.extend({

mixins: [myMixin]

})

We can add a global mixin by writing:

Vue.mixin({

methods: {

hello() {

console.log('hello')

}

}

})

Then we don’t have to add a mixins property in our component.

To add a property to Vue.prototype , we can write:

import axios from 'axios';

Vue.prototype.$http = axios;

Then when we create components or a Vue instance, we can use this.$http to reference it.

Photo by Chris Benson on Unsplash

Conclusion

We should use Vue CLI to create a project if we want to use modules.

There are many ways to reuse code with Vue.

To make Vue update the page when updating an existing array item, we use this.$set .

JavaScript In Plain English

Did you know that we have four publications and a YouTube channel? Find them all at plainenglish.io and subscribe to our YouTube channel!