Category: Vue

Sometimes, we want to listen for props changes with Vue.js

In this article, we’ll look at how to listen for props changes with Vue.js.

How to listen for props changes with Vue.js?

To listen for props changes with Vue.js, we can add a watcher for the prop.

For instance, we write

<script>
export default {
  //...
  watch: {
    myProp: {
      immediate: true,
      handler(val, oldVal) {
        // ...
      },
    },
  },
  //...
};
</script>

to watch the value of the myProp prop by setting watch.myProp to an object with immediate set to true to watch the initial value of the myProp prop.

And we set handler to a function that gets the val and oldVal values to get the new and old value of the myProp prop value respectively.

Conclusion

To listen for props changes with Vue.js, we can add a watcher for the prop.

Sometimes, we want to get selected option on @change with Vue.js.

In this article, we’ll look at how to get selected option on @change with Vue.js.

How to get selected option on @change with Vue.js?

To get selected option on @change with Vue.js, we can set @change to a method that calls $event.

For instance, we write

<template>
  <select name="leaveType" @change="onChange($event)" v-model="key">
    <option value="1">Off-Day</option>
    <option value="2">On Demand Leave</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      key: "",
    };
  },
  methods: {
    onChange(event) {
      console.log(event.target.value);
    },
  },
};
</script>

to add the onChange method that has the event parameter.

In the template, we set @change of the select element to onChange($event) to call onChange when we change the selection in the drop down.

The $event object has the native change event emitted by the select element.

So we can get the latest selected value from event.target.value.

Conclusion

To get selected option on @change with Vue.js, we can set @change to a method that calls $event.

Sometimes, we want to call function on child component on parent events with Vue.js.

In this article, we’ll look at how to call function on child component on parent events with Vue.js.

How to call function on child component on parent events with Vue.js?

To call function on child component on parent events with Vue.js, we can assign the ref to the child component and then call the method in the parent when the event is emitted.

For instance, we add

<div id="app">
  <child-component ref="childComponent"></child-component>
  <button @click="click">Click</button>
</div>

to add a template with the child-component added.

We assign a ref to it.

And we call click when we click the button by adding @click="click".

Next, we write

const ChildComponent = {
  template: "<div>{{value}}</div>",
  data() {
    return {
      value: 0,
    };
  },
  methods: {
    setValue(value) {
      this.value = value;
    },
  },
};

new Vue({
  el: "#app",
  components: {
    "child-component": ChildComponent,
  },
  methods: {
    click() {
      this.$refs.childComponent.setValue(2);
    },
  },
});

to add the click method that calls this.$refs.childComponent.setValue to call setValue in child-component when we click on the button.

Conclusion

To call function on child component on parent events with Vue.js, we can assign the ref to the child component and then call the method in the parent when the event is emitted.

Sometimes, we want to deep watch an array of objects and calculating the change with Vue.js.

In this article, we’ll look at how to deep watch an array of objects and calculating the change with Vue.js.

How to deep watch an array of objects and calculating the change with Vue.js?

To deep watch an array of objects and calculating the change with Vue.js, we can add a deep watcher and get the old and new values from the watcher method.

For instance, we write

<template>
  <div id="app">
    <input
      type="text"
      v-for="(person, index) in people"
      v-model="people[index].age"
    />
  </div>
</template>

<script>
new Vue({
  el: "#app",
  data: {
    people: [
      { id: 0, name: "jane", age: 27 },
      { id: 1, name: "joe", age: 32 },
      { id: 2, name: "bob", age: 38 },
    ],
  },
  watch: {
    people: {
      handler(val, oldVal) {
        const changed = val.filter((p, idx) => {
          return Object.keys(p).some((prop) => {
            return p[prop] !== oldVal[idx][prop];
          });
        });
        console.log(changed);
      },
      deep: true,
    },
  },
});
</script>

to add the watcher for the people array.

And then we get the new and old value of people with val and oldVal respectively.

Next, we compute the change between val and oldVal with

const changed = val.filter((p, idx) => {
  return Object.keys(p).some((prop) => {
    return p[prop] !== oldVal[idx][prop];
  });
});

to call val.filter with a callback to check if a property in the object is different from the old value.

We set deep to true to make Vue watch all the contents of people for changes.

Conclusion

To deep watch an array of objects and calculating the change with Vue.js, we can add a deep watcher and get the old and new values from the watcher method.

Sometimes, we want to implement debounce in Vue.js.

In this article, we’ll look at how to implement debounce in Vue.js.

How to implement debounce in Vue.js?

To implement debounce in Vue.js, we can use the Lodash debounce method.

To install it, we run

npm i lodash

Then we use it by writing

<template <input @input="debounceInput"></template>

<script>
import { debounce } from "lodash";
//...
export default {
  methods: {
    debounceInput: debounce(function (e) {
      this.$store.dispatch("updateInput", e.target.value);
    }, 1000),
  },
};
</script>

to set the debounceInput method to the debounced version of the method that calls this.$store.dispatch with the e.target.value input value.

We debounce the method by 1000 milliseconds by setting the 2nd argument of debounce to 1000.

Then we set the @input directive to debounceInput to run debounceInput when the input event is emitted.

Conclusion

To implement debounce in Vue.js, we can use the Lodash debounce method.