Common Vue Problems — State Updates, Vuex, and Event Handlers
Tags: vue, webdev, programming, javascript
Published: 2021-01-26 01:17:30

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**


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 event and argument to v-on in Vue.js

We can pass arguments to the method we call in the `v-on` directive in Vue.

For instance, we can write:

```
<input type="number" v-on:input="addToCart($event, item.id)" min="0" placeholder="0">
```

in our template.

Then in our component, we can write:

```
methods: {
  addToCart(event, id){
    console.log(id)
  }
}
```

`$event` has the object emitted from the `input` event.

`id` has the `item.id` that we passed in the template code.

### The Purpose of nextTick

`nextTick` lets us do something after we changed the data.

It’s like `setTimeout` in plain JavaScript.

`nextTick` detects changes from data changes, so it’ll always run after a piece of data has been updated.

`setTimeout` isn’t aware of that.

For instance, if we have:

```
<template>
  <div>
    {{ val }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      val: 1
    }
  },
  mounted() {
    this.val = 2;

    this.$nextTick(() => {
      this.val = 3;
    });
  }
}
</script>
```

The initial value of `this.val` is 1.

Then the `mounted` hook is called and updates `this.val` is 2.

Once that update is done, then Vue updates `this.val` to 3.

### Difference Between $mount() and $el

`$mount` lets us explicitly mount the Vue instance when we need to.

With it, we can delay the `Vue` instance until a particular element exists.

This is useful for adding Vue to legacy apps where the elements are added by manipulating the DOM.

`el` mounts the `Vue` instance straight into the DOM without checking whether it exists first.

Therefore, it’s useful for mounting the instance to a static element or something that we know always loads before the `Vue` instance.

### [Vue warn]: Cannot find element

This error means that Vue can’t the element with the given select to mount the component on.

For instance, if we have:

```
const main = new Vue({
  el: '#main',
  data: {
    hello: 'home'
  }
});
```

Then the element with ID `main` isn’t found.

To fix that, we should make sure that the element is loaded before we create the `Vue` instance.

For example, we can write:

```
window.onload = () => {
  const main = new Vue({
    el: '#main',
    data: {
      hello: 'home'
    }
  });
}
```

or we can write:

```
window.addEventListener('load', () => {
  // add the same Vue instance as the previous example
})
```

They both let us mount the `Vue` instance after the given element is present in the DOM.

### Load All Server-Side Data on Initial Vue.js Load

We can load the data into the Vuex store before creating the Vue instance by writing our own function to load it.

For example, we can write:

```
const store = (data) => {
  return new Vuex.Store({
    state: {
      exams: data,
    },
    actions,
    getters,
    mutations,
  });
}

fetch('/some/url')
  .then(response => response.json())
  .then((data) => {
    new Vue({
      el: '#app',
      router,
      store: store(data),
      template: '<App/>',
      components: { App },
    });
  });
```

We have a function to create the store with the`store` .

Then we call the `store` function in our object that we passed into the `Vue` constructor.

The `data` we passed into the `store` is from the `fetch` function call.

This way, the data will be populated in the store before it goes to the store.

### Import SASS or SCSS with a Vue CLI Project

We can import SASS or SCSS with a Vue app created with Vue CLI by adding the `node-sass` and `sass-loaer` packages.

Then we can load the SCSS files in our code.

To install the packages, we run:

```
npm install -D node-sass sass-loader
```

Then we can write:

```
import './styles/my-styles.scss'
```

to import the styles globally in `main.js` .

If we want to import a SASS or SCSS file in the file, then we write:

```
<style lang="scss">
  ...
</style>
```

to add make Vue aware of SCSS code.

### Conclusion

To let us use SASS or SCSS code in an existing project, we can use the SASS loader package.

If we want to load data to a Vuex store before loading our Vue app, we can load the data, then create the Vuex store with the data.

Then we can create our Vue instance with the store.

We can pass anything to event handlers.

`nextTick` is handy for updating our state after some other update.