Author: John Au-Yeung

Sometimes, we want to toggle classes on click with Vue.js with JavaScript.

In this article, we’ll look at how to toggle classes on click with Vue.js with JavaScript.

Toggle Classes on Click with Vue.js with JavaScript

We can toggle classes by passing an object into the :class prop.

For instance, we write:

<template>
  <div id="app">
    <button @click="setActive">toggle class</button>
    <p :class="{ active }">hello</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      active: false,
    };
  },
  methods: {
    setActive() {
      this.active = !this.active;
    },
  },
};
</script>

<style scoped>
.active {
  color: red;
}
</style>

We have the setActive function that toggles the this.active reactive property.

We set that as the value of the @click directive to run it when we click the button.

Then we have :class=”{ active }” to add the active class when active is true .

And we set any element the active class to have color red.

Therefore, when we click the toggle class button, we should see the red color on the text toggle on and off.

Conclusion

We can toggle classes by passing an object into the :class prop.

Sometimes, we want to render newline characters in our Vue.js app with JavaScript.

In this article, we’ll look at how to render newline characters in our Vue.js app with JavaScript.

Render Newline Characters in Vue.js with JavaScript

We can render newline characters in our Vue.js app with the pre tag.

For instance, we can write:

<template>
  <div id="app">
    <pre>{{ text }}</pre>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      text: `You can see the newline after me!\nWoohoo!`,
    };
  },
};
</script>

We have the text reactive property set to a string with a newline character.

Then we interpolate the text in the pre tag to render it as-is.

Conclusion

We can render newline characters in our Vue.js app with the pre tag.

Sometimes, we want to listen to the window scroll event in a Vue.js component with JavaScript.

In this article, we’ll look at how to listen to the window scroll event in a Vue.js component with JavaScript.

Listen to the Window Scroll Event in a Vue.js Component

We can listen to the window scroll event in a Vue.js component by calling the window.addEventListener method to listen to the scroll event on the browser window.

For instance, we can write:

<template>
  <div id="app">
    <p v-for="n of 100" :key="n">{{ n }}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  created() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll(event) {
      console.log(window.scrollY);
    },
  },
};
</script>

We call window.addEventListener with 'scroll' in the created hook to add the handleScroll scroll event listener when the component is mounted.

And in the destroyed hook, we call window.renmoveListener to remove the handleScroll scroll event listener.

In the handleScroll method, we have the window.scrollY property to get the vertical scroll position.

In the template, we have some scrollable content. If we scroll through it, we should see the scrollY value logged.

Conclusion

We can listen to the window scroll event in a Vue.js component by calling the window.addEventListener method to listen to the scroll event on the browser window.

Sometimes, we want to scroll to an element with Vue.js and JavaScript.

In this article, we’ll look at how to scroll to an element with Vue.js and JavaScript.

Scroll to an Element with Vue.js and JavaScript

We can scroll to an element with Vue.js by assigning a ref to the element we want to scroll to.

Then we can scroll to the element by calling the scrollIntoView method on the element assigned to the ref.

For instance, we can write:

<template>
  <div id="app">
    <button @click="scrollToElement">scroll to last</button>
    <p v-for="n of 100" :key="n" :ref="n === 100 ? 'last' : undefined">
      {{ n }}
    </p>
  </div>
</template>

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

We have the scroll to last button that calls scrollToElement .

Then we have some p element with the last ref being assigned to the last p element.

In the scrollToElement method, we get the element assigned to the last ref with this.$refs.last via destructuring.

Then we call el.scrollIntoView with an object that has the behavior property to change the scroll behavior.

Conclusion

We can scroll to an element with Vue.js by assigning a ref to the element we want to scroll to.

Then we can scroll to the element by calling the scrollIntoView method on the element assigned to the ref.