Category: Vue Answers

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.

Sometimes, we want to change body styles in Vue Router.

In this article, we’ll look at how to change body styles in Vue Router.

How to change body styles in Vue Router?

To change body styles in Vue Router, we can add a watcher for the $route object and then change the styles in the watcher.

For instance, we write

<script>
export default {
  //...
  watch: {
    $route: {
      handler(to, from) {
        const [body] = document.getElementsByTagName("body");
        if (from !== undefined) {
          body.classList.remove(`page-${from.name.toLowerCase()}`);
        }
        body.classList.add(`page-${from.name.toLowerCase()}`);
      },
      immediate: true,
      deep: true,
    },
  },
  //...
};
</script>

to add a watcher for the $route object.

We get the body element with getElementsByTagName.

Then we call body.classList.remove to remove the class if from isn’t undefined.

And then we call body.classList.add to add the class again.

We set immediate to true so the watcher runs immediately when the page loads.

And we set deep to true to run the watcher when any content in the $route object changes.

Conclusion

To change body styles in Vue Router, we can add a watcher for the $route object and then change the styles in the watcher.