Category: Vue

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.

Sometimes, we want to watch multiple properties with single handler with Vue.js.

In this article, we’ll look at how to watch multiple properties with single handler with Vue.js.

How to watch multiple properties with single handler with Vue.js?

To watch multiple properties with single handler with Vue.js, we can use the this.$watch method.

For instance, we write

<script>
//...
export default {
  //...
  data() {
    return {
      name: "Alice",
      lastName: "Smith",
      fullName: "",
    };
  },
  mounted() {
    this.$watch(
      (vm) => [vm.name, vm.lastName],
      (val) => {
        this.fullName = `${this.name} ${this.lastName}`;
      },
      {
        immediate: true,
        deep: true,
      }
    );
  },
  //...
};
</script>

to call this.$watch with a function that returns the reactive properties we want to watch, a function that runs when any of the reactive properties change, and an object with some options.

We return an array of reactive properties we want to watch with

(vm) => [vm.name, vm.lastName]

And we so something with the values of the reactive properties when any of them change with

(val) => {
  this.fullName = `${this.name} ${this.lastName}`;
};

We set immediate to true to start watching the reactive properties when the component mounts.

And we set deep to true to watch all nested properties of each reactive property for changes.

Conclusion

To watch multiple properties with single handler with Vue.js, we can use the this.$watch method.

Sometimes, we want to access data from methods with Vue.js.

In this article, we’ll look at how to access data from methods with Vue.js.

How to access data from methods with Vue.js?

To access data from methods with Vue.js, we can get them from this.

For instance, we write

<script>
//...
export default {
  //...
  data() {
    return {
      sendButtonDisable: false,
    };
  },

  methods: {
    postQuestionsContent() {
      this.sendButtonDisable = true;
    },
  },
  //...
};
</script>

to add the postQuestionsContent method.

In it, we set the sendButtonDisable reactive property to true.

We can get the value of this.sendButtonDisable with this.sendButtonDisable

Conclusion

To access data from methods with Vue.js, we can get them from this.