Category: JavaScript

Sometimes, we want to bind method result to v-model with Vue.js.

In this article, we’ll look at how to bind method result to v-model with Vue.js.

How to bind method result to v-model with Vue.js?

To bind method result to v-model with Vue.js, we can put the logic in a computed property.

For instance, we write

<template>
  <div id="app">
    <input v-model="doubleValue" />
  </div>
</template>

<script>
//...
export default {
  //...
  data() {
    return { value: 5 };
  },
  computed: {
    doubleValue: {
      get() {
        return this.value * 2;
      },
      set(newVal) {
        this.value = newVal / 2;
      },
    },
  },
  //...
};
</script>

to add the doubleValue computed property which has a getter and a setter.

In the get getter, we return this.value multiplied by 2.

And in the set setter, we set this.value to newVal divided by 2.

And then we use that with v-model to bind doubleValue to the input value.

Conclusion

To bind method result to v-model with Vue.js, we can put the logic in a computed property.

Sometimes, we want to call a function as soon as the cursor moves from one text box to next in Vue.js.

In this article, we’ll look at how to call a function as soon as the cursor moves from one text box to next in Vue.js.

How to call a function as soon as the cursor moves from one text box to next in Vue.js?

To call a function as soon as the cursor moves from one text box to next in Vue.js, we can listen to the blur event.

For instance, we write

<template>
  <div id="app">
    <input @blur="handleBlur" placeholder="first name" />
    <input @blur="handleBlur" placeholder="last name" />
  </div>
</template>

to listen to the blur event and run the handleBlur method if the event is triggered with

@blur="handleBlur" 

Conclusion

To call a function as soon as the cursor moves from one text box to next in Vue.js, we can listen to the blur event.

Sometimes, we want to get route URL parameters in a page with Nuxt.js.

In this article, we’ll look at how to get route URL parameters in a page with Nuxt.js.

How to get route URL parameters in a page with Nuxt.js?

To get route URL parameters in a page with Nuxt.js, we can get them from the this.$route.params object.

For instance, we write

<script>
//...
export default {
  //...
  mounted() {
    console.log(this.$route.params.slug);
  },
  //...
};
</script>

to get the value of the slug URL parameter with this.$route.params.slug).

Conclusion

To get route URL parameters in a page with Nuxt.js, we can get them from the this.$route.params object.

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.