Category: Vue

Sometimes, we want to add Vue.js event on window.

In this article, we’ll look at how to add Vue.js event on window.

How to add Vue.js event on window?

To add Vue.js event on window, we can call window.addEventListener in our Vue component’s methods.

For instance, we write

<script>
//...
export default {
  //...
  methods: {
    keyDown() {
      const activeElement = this.$refs.el;
      if (activeElement && !isNaN(event.key) && event.key > 0) {
        activeElement.innerHTML = event.key;
      }
    },
  },

  created() {
    window.addEventListener("keydown", this.keyDown);
  },

  destroyed() {
    window.removeEventListener("keydown", this.keyDown);
  },
  //...
};
</script>

to call window.addEventListener with the 'keydown' event and the this.keyDown method as the event handler callback in the created hook.

And then we call window.removeEventListener with the same arguments to clear the listeners in the destroyed hook to remove the listeners when the component unmounts.

Conclusion

To add Vue.js event on window, we can call window.addEventListener in our Vue component’s methods.

Sometimes, we want to fix Vue.js Vuetify icon not showing.

In this article, we’ll look at how to fix Vue.js Vuetify icon not showing.

How to fix Vue.js Vuetify icon not showing?

To fix Vue.js Vuetify icon not showing, we should install the material-design-icons-iconfont package.

To install it, we run

npm install --save material-design-icons-iconfont

Then we add

import 'material-design-icons-iconfont/dist/material-design-icons.css'

to the top of the main.js file in our Vue CLI Vue project.

Conclusion

To fix Vue.js Vuetify icon not showing, we should install the material-design-icons-iconfont package.

Sometimes, we want to add an event listener to a component using the v-on directive with Vue.js.

In this article, we’ll look at how to add an event listener to a component using the v-on directive with Vue.js.

How to add an event listener to a component using the v-on directive with Vue.js?

To add an event listener to a component using the v-on directive with Vue.js, we should add the native modifier.

For instance, we write

<template>
  <div id="app">
    <router-link :to="to" @click.native="buttonClickHandler">
    </router-link>
  </div>
</template>

to set the add the native modifier to @click and set it to buttonClickHandler.

Then buttonClickHandler will run when we click on the router-link component.

Conclusion

To add an event listener to a component using the v-on directive with Vue.js, we should add the native modifier.

Sometimes, we want to fix Vue.js getting old value when in the change event handler.

In this article, we’ll look at how to fix Vue.js getting old value when in the change event handler.

How to fix Vue.js getting old value when in the change event handler?

To fix Vue.js getting old value when in the change event handler, we should remove v-model when we use @change.

For instance, we write

<template>
  <div id="app">
    <input type="text" name="qty" :value="item.age" @change="changeAge" />
  </div>
</template>

<script>
//...
export default {
  //...
  methods: {
    changeAge(val) {
      const ov = this.item.age;
      const nv = val;
    },
  },
  //...
};
</script>

to call changeAge when the change event is emitted from the input with

@change="changeAge" 

then we set the value prop of the input to item.age, which is what we want to show in the input box.

Conclusion

To fix Vue.js getting old value when in the change event handler, we should remove v-model when we use @change.

Sometimes, we want to scroll to bottom of the div with Vue.js

In this article, we’ll look at how to scroll to bottom of the div with Vue.js.

How to scroll to bottom of the div with Vue.js?

To scroll to bottom of the div with Vue.js, we can call the HTML element’s scrollIntoView method.

For instance, we write

<script>
export default {
  methods: {
    scrollToElement() {
      const el = this.$refs.scrollToMe;
      if (el) {
        el.scrollIntoView({ behavior: "smooth" });
      }
    },
  },
};
</script>

to get the element we want to scroll to with this.$refs.scrollToMe and assign it to el.

Then we call el.scrollIntoView to do the scrolling to the element that the ref is assigned to.

We set behavior to 'smooth' to make the scrolling smooth.

Conclusion

To scroll to bottom of the div with Vue.js, we can call the HTML element’s scrollIntoView method.