Category: JavaScript

Sometimes, we want to clear an input in a Vue.js form.

In this article, we’ll look at how to clear an input in a Vue.js form.

How to clear an input in a Vue.js form?

To clear an input in a Vue.js form, we can set our v-model values to an empty string.

For instance, we write

<template>
  <div>
    <form id="todo-field" @submit.prevent="submitForm">
      <input type="text" v-model="name" />
    </form>
  </div>
</template>

<script>
export default {
  //...
  data() {
    return {
      name: "",
    };
  },
  methods: {
    submitForm(event) {
      this.name = "";
    },
  },
  //...
};
</script>

to add a form with an input that has its input value to name.

We call submitForm when we submit the form.

In submitForm, we set this.name to an empty string to empty string when we submit the form.

Conclusion

To clear an input in a Vue.js form, we can set our v-model values to an empty string.

Sometimes, we want to fix the ‘document is not defined’ error in Nuxt.js.

In this article, we’ll look at how to fix the ‘document is not defined’ error in Nuxt.js.

How to fix the ‘document is not defined’ error in Nuxt.js?

To fix the ‘document is not defined’ error in Nuxt.js, we can wrap our client side code with the client-only component.

For instance, we write

<template>
  <div>
    <client-only placeholder="loading...">
      <your-component> ... </your-component>
    </client-only>
  </div>
</template>

to wrap the the client side only your-component component with client-only so that it’s only rendered in the browser.

document is defined only in the browser, so we need client-only to avoid the error.

Conclusion

To fix the ‘document is not defined’ error in Nuxt.js, we can wrap our client side code with the client-only component.

Sometimes, we want to access the window object in Vue.js.

In this article, we’ll look at how to access the window object in Vue.js.

How to access the window object in Vue.js?

To access the window object in Vue.js, we can add window properties as global properties.

For instance, in Vue 2, we write

import Vue from 'vue';

Vue.prototype.$authUser = window.authUser;

to add the window.authUser value into the Vue prototype.

Then we can access routes in our component with

this.$authUser 

In Vue 3, we add the same property into app.config.globalProperties.

We write

app.config.globalProperties.$authUser = window.authUser;

Then we can access routes in our component with

this.$authUser 

Conclusion

To access the window object in Vue.js, we can add window properties as global properties.

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.