Category: JavaScript

Sometimes, we want to add routes with parameters in Vue.js using Vue Router router-link.

In this article, we’ll look at how to add routes with parameters in Vue.js using Vue Router router-link.

How to add routes with parameters in Vue.js using Vue Router router-link?

To add routes with parameters in Vue.js using Vue Router router-link, we can set the to prop to an object with the params property set to an object with the URL parameters.

For instance, we write

<template>
  <div>
    <router-link :to="{ name: 'user', params: { userId: 123 } }">
      User
    </router-link>
  </div>
</template>

to add router-link with the to prop set to an object with the params property set to { userId: 123 }

to replace the userId URL parameter placeholder with 123.

name is the name property value that we set when we define the route.

Conclusion

To add routes with parameters in Vue.js using Vue Router router-link, we can set the to prop to an object with the params property set to an object with the URL parameters.

Sometimes, we want to use async and await with Vuex dispatch.

In this article, we’ll look at how to use async and await with Vuex dispatch.

How to use async and await with Vuex dispatch?

To use async and await with Vuex dispatch, we can add an action method that’s an async function.

For instance, we write

const store = new Vuex.Store({
  //...
  actions: {
    getProducts: async ({ commit }, type) => {
      try {
        const { data: products } = await axios.get(`/api/products/${type}`);
        commit("SET_PRODUCTS", { products, type });
      } catch (err) {
        console.log(err);
      }
    },
  },
  //...
});

to add the getProducts action that makes an async request with axios.get.

And then we call commit to commit the SET_PRODUCTS mutation to store the data.

Conclusion

To use async and await with Vuex dispatch, we can add an action method that’s an async function.

Sometimes, we want to reference the form element when we submit a form in Vue.js.

In this article, we’ll look at how to reference the form element when we submit a form in Vue.js.

How to reference the form element when we submit a form in Vue.js?

To reference the form element when we submit a form in Vue.js, we can use a ref.

For instance, we write

<template>
  <div>
    <form ref="form" @submit.prevent="submit">
      <input v-model="store.vital" />
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
//...
export default {
  //...
  methods: {
    submit() {
      this.$refs.form.$el.submit();
    },
  },
  //...
};
</script>

to add a form and we assign the form ref to it.

And we make the submit method run when we submit the form with @submit.prevent="submit".

The prevent modifier calls event.preventDefault to prevent the default server side submission behavior.

In submit, we get the form element with this.$refs.form.$el.

Conclusion

To reference the form element when we submit a form in Vue.js, we can use a ref.

Sometimes, we want to get window size whenever it changes with Vue.js.

In this article, we’ll look at how to get window size whenever it changes with Vue.js.

How to get window size whenever it changes with Vue.js?

To get window size whenever it changes with Vue.js, we can call window.addEventListener to add a resize event listener.

For instance, we write

<script>
//...
export default {
  //...
  created() {
    window.addEventListener("resize", this.onResize);
  },
  destroyed() {
    window.removeEventListener("resize", this.onResize);
  },
  methods: {
    onResize(e) {
      this.size = window.innerWidth;
    },
  },
  //...
};
</script>

to call window.addEventListener with 'resize' to listen to the resize event in the created hook to add it before we mount the component.

The resize event is triggered when we change the window size.

We set the event handler to onResize.

In the destroyed hook, we call window.removeEventListener to remove the resize event listener.

In it, we get the window width with window.innerWidth and height with window.innerHeight.

Conclusion

To get window size whenever it changes with Vue.js, we can call window.addEventListener to add a resize event listener.

Sometimes, we want to set add the selected attribute to an drop down option in Vue.js.

In this article, we’ll look at how to set add the selected attribute to an drop down option in Vue.js.

How to set add the selected attribute to an drop down option in Vue.js?

To set add the selected attribute to an drop down option in Vue.js, we can add the selected attribute directly.

For instance, we write

<template>
  <select v-model="selected" required @change="changeLocation">
    <option selected>Choose Province</option>
    <option v-for="option in options" :value="option.id" :key="option.id">
      {{ option.name }}
    </option>
  </select>
</template>

to add the selected to the first option by writing

<option selected>Choose Province</option>

just like in regular HTML.

Conclusion

To set add the selected attribute to an drop down option in Vue.js, we can add the selected attribute directly.