Category: Vue Answers

Sometimes, we want to scroll to top of new page route with Vue.js.

In this article, we’ll look at how to scroll to top of new page route with Vue.js.

How to scroll to top of new page route with Vue.js?

To scroll to top of new page route with Vue.js, we can add the scrollBehavior method when we’re creating the Vue Router instance.

For instance, we write

export default new Router({
  scrollBehavior() {
    return { x: 0, y: 0 };
  },
  routes: [
    {
      path: "/",
      name: "Home",
      component: Home,
    },
  ],
  mode: "history",
});

to add the scrollBehavior method that returns an object with the x and y coordinates to scroll to when we change routes.

Conclusion

To scroll to top of new page route with Vue.js, we can add the scrollBehavior method when we’re creating the Vue Router instance.

Sometimes, we want to submit a form, redirect to a new route and pass the parameters in Vue.js.

In this article, we’ll look at how to submit a form, redirect to a new route and pass the parameters in Vue.js.

How to submit a form, redirect to a new route and pass the parameters in Vue.js?

To submit a form, redirect to a new route and pass the parameters in Vue.js, we can call this.$router.push in the submit event handler.

For instance, we write

<template>
  <div id="app">
    <form>
      <input type="text" name="foobar" v-model="foobar" />
      <button type="submit" @click.stop.prevent="submit()">Submit</button>
    </form>
  </div>
</template>

<script>
//...
export default {
  //...
  data() {
    return {
      foobar: null,
    };
  },
  methods: {
    submit() {
      const { foobar } = this;
      this.$router.push({ path: "/search", query: { foobar } });
    },
  },
  //...
};
</script>

to add a form with a submit button.

We call submit when we submit the form.

In it, we call this.$router.push with an object with the route path and the query string parameters in the query property.

We add the prevent to the @click directive to stop the default server side form submission behavior.

Conclusion

To submit a form, redirect to a new route and pass the parameters in Vue.js, we can call this.$router.push in the submit event handler.

Sometimes, we want to get Vuex state from a JavaScript file with Vue.js.

In this article, we’ll look at how to get Vuex state from a JavaScript file with Vue.js.

How to get Vuex state from a JavaScript file with Vue.js?

To get Vuex state from a JavaScript file with Vue.js, we can import the Vuex store and use it directly.

For instance, we write

import { store } from "../store";

export function getAuth() {
  return store.state.authorization.AUTH_STATE;
}

to import the store from a module.

Then we get a state value from the store with store.state.authorization.AUTH_STATE.

Conclusion

To get Vuex state from a JavaScript file with Vue.js, we can import the Vuex store and use it directly.

Sometimes, we want to add a class conditionally in Vue.js.

In this article, we’ll look at how to add a class conditionally in Vue.js.

How to add a class conditionally in Vue.js?

To add a class conditionally in Vue.js, we can add the :class directive.

For instance, we write

<template>
  <div id="app">
    <div :class="condition ? 'class-if-is-true' : 'else-class'"></div>
  </div>
</template>

to set the class prop of the div to 'class-if-is-true' if condition is true.

Otherwise, we set class to 'else-class'.

Conclusion

To add a class conditionally in Vue.js, we can add the :class directive.

Sometimes, we want to hide div on click in Vue.js.

In this article, we’ll look at how to hide div on click in Vue.js.

How to hide div on click in Vue.js?

To hide div on click in Vue.js, we can use the v-if directive.

For instance, we write

<template>
  <div id="app">
    <button @click="isHidden = true">Hide</button>
    <button @click="isHidden = !isHidden">Toggle hide and show</button>

    <h1 v-if="!isHidden">Hide me on click event!</h1>
  </div>
</template>

<script>
//...
export default {
  //...
  data() {
    return {
      isHidden: false,
    };
  },
  //...
};
</script>

to add the isHidden reactive property by returning it in the object in the data method.

And then we add 2 buttons.

The first set isHidden to true when we click it.

And then 2nd toggles the value of isHidden between false and true when we click it.

We then add v-if to show the h1 element when isHidden is false.

Conclusion

To hide div on click in Vue.js, we can use the v-if directive.