Category: Vue Answers

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.

Sometimes, we want to render a newline character in Vue.js.

In this article, we’ll look at how to render a newline character in Vue.js.

How to render a newline character in Vue.js?

To render a newline character in Vue.js, we add the white-space: pre CSS style.

For instance, we write

<template>
  <div id="app">
    <span style="white-space: pre">Some whitespaced content</span>
  </div>
</template>

to add the white-space: pre style to the span to render the newline characters in the span text content.

Conclusion

To render a newline character in Vue.js, we add the white-space: pre CSS style.