Category: Vue

Sometimes, we want to use async and await in Vue.js.

In this article, we’ll look at how to use async and await in Vue.js.

How to use async and await in Vue.js?

To use async and await in Vue.js, we can add async and await in our component methods and hooks.

For instance, we write

<script>
export default {
  //...
  async created() {
    await this.getA();
    console.log(1);
    this.getB();
  },
  methods: {
    getA: async () => {
      return $axios.post(`/getA`, params);
    },
    getB: () => {
      console.log(3);
    },
  },
  //...
};
</script>

to make the created hook an async method.

We use await to wait for the getA method to finish before running the rest of the code.

getA returns a promise so we can use await to wait for it to finish.

Conclusion

To use async and await in Vue.js, we can add async and await in our component methods and hooks.

Sometimes, we want to get form data on submit with Vue.js.

In this article, we’ll look at how to get form data on submit with Vue.js.

How to get form data on submit with Vue.js?

To get form data on submit with Vue.js, we can get them from the submit event object.

For instance, we write

<template>
  <div id="app">
    ...
    <form @submit.prevent="getFormValues">
      <input type="text" name="name" />
    </form>

    ...
  </div>
</template>

<script>
export default {
  //...
  methods: {
    getFormValues(submitEvent) {
      this.name = submitEvent.target.elements.name.value;
    },
  },
  //...
};
</script>

to set @submit.prevent to getFormValues to use getFormValues as the submit event handler.

Then in getFormValues we get the submitEvent object and then get the value of the input with the name attribute set to name with

submitEvent.target.elements.name.value;

submitEvent.target is the form element since we set @submit.prevent to getFormValues.

Conclusion

To get form data on submit with Vue.js, we can get them from the submit event object.

Sometimes, we want to silently update URL without triggering route change in Vue Router.

In this article, we’ll look at how to silently update URL without triggering route change in Vue Router.

How to silently update URL without triggering route change in Vue Router?

To silently update URL without triggering route change in Vue Router, we can use the history.pushState method.

For instance, we write

<script>
export default {
  //...
  methods: {
    addHashToLocation(params) {
      history.pushState(
        {},
        null,
        `${this.$route.path}#${encodeURIComponent(params)}`
      );
    },
  },
  //...
};
</script>

to call history.pushState with the URL we want to go to as the 3rd argument.

This will change the URL without trigger a route change.

Conclusion

To silently update URL without triggering route change in Vue Router, we can use the history.pushState method.

Sometimes, we want to export more than one variable in ES6.

In this article, we’ll look at how to export more than one variable in ES6.

How to export more than one variable in ES6?

To export more than one variable in ES6, we can put all the variables in the curly braces.

For instance, we write

store.js

const testObject = Parse.Object.extend("TestObject");
const post = Parse.Object.extend("Post");

export { testObject, post };

to export the testObject and post in a module.

Then we import the members from store.js with

import { testObject, post } from '../store'

Conclusion

To export more than one variable in ES6, we can put all the variables in the curly braces.

Sometimes, we want to order objects in v-for with Vue.js.

In this article, we’ll look at how to order objects in v-for with Vue.js.

How to order objects in v-for with Vue.js?

To order objects in v-for with Vue.js, we can create a computed property and then use the computed property with v-for.

For instance, we write

<template>
  <div id="app">
    ...
    <p v-for="user in orderedUsers">{{ user.name }}</p>

    ...
  </div>
</template>

<script>
export default {
  //...
  computed: {
    orderedUsers() {
      return this.users.sort((a, b) => a.name.localeCompare(b.name));
    },
  },
  //...
};

</script>

to create the orderedUsers computed property that returns the this.users array sorted by the name property value of each object.

Then we use v-for to render the objects’ name property values with v-for.

Conclusion

To order objects in v-for with Vue.js, we can create a computed property and then use the computed property with v-for.