Category: JavaScript

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.

Sometimes, we want to watch store values from Vuex.

In this article, we’ll look at how to watch store values from Vuex.

How to watch store values from Vuex?

To watch store values from Vuex, we can add a watcher in our component to watch the store value.

For instance, we write

<script>
//...
export default {
  watch: {
    "$store.state.drawer"(val) {
      console.log(val);
    },
  },
};
</script>

to watch the $store.state.drawer value in our component by setting '$store.state.drawer' to a function with the val parameter.

We get the latest value of the $store.state.drawer property from the val parameter.

Conclusion

To watch store values from Vuex, we can add a watcher in our component to watch the store value.

Sometimes, we want to pass data from child to parent in Vue.js.

In this article, we’ll look at how to pass data from child to parent in Vue.js.

How to pass data from child to parent in Vue.js?

To pass data from child to parent in Vue.js, we should emit an event from the child component to the parent component.

For instance, we write

this.$emit("eventname", this.variable);

to call this.$emit with the event name and the variables we want to emit to the parent.

Then in the parent component, we write

<template>
  <child-component @eventname="updateParent"></child-component>
</template>

<script>
export default {
  //...
  methods: {
    updateParent(variable) {
      this.parentvariable = variable;
    },
  },
  //...
};
</script>

to add the child-component in our parent component’s template.

And we listen for the eventname event and call updateParent when the eventname event is emitted.

We get this.variable that we called this.$emit with from the variable parameter of updateParent.

Conclusion

To pass data from child to parent in Vue.js, we should emit an event from the child component to the parent component.