Category: JavaScript

Sometimes, we want to get an element’s height with Vue.js.

In this article, we’ll look at how to get an element’s height with Vue.js.

How to get an element’s height with Vue.js?

To get an element’s height with Vue.js, we can assign a ref to the element we want to get the height for and then use its clientHeight property.

For instance, we write

<template>
  <section>
    <div ref="infoBox">
      <img />
      <ul>
        some list
      </ul>
    </div>
  </section>
</template>

<script>
export default {
  //...
  mounted() {
    this.matchHeight();
  },
  matchHeight() {
    const height = this.$refs.infoBox.clientHeight;
  },
};
</script>

to assign the infoBox ref to the div with the ref prop.

Then we get the div’s height with

this.$refs.infoBox.clientHeight;

Conclusion

To get an element’s height with Vue.js, we can assign a ref to the element we want to get the height for and then use its clientHeight property.

Sometimes, we want to call a method in a child component with Vue.js.

In this article, we’ll look at how to call a method in a child component with Vue.js.

How to call a method in a child component with Vue.js?

To call a method in a child component with Vue.js, we can pass in a prop from the parent component to its child.

Then in the child component, we watch the prop’s value and run the method we want.

For instance, we write

<script>
export default {
  //...
  props: ["testProp"],
  methods: {
    sayHello() {
      alert("hello");
    },
  },
  watch: {
    testProp(newVal, oldVal) {
      this.sayHello();
    },
  },
};
</script>

in the child component to register the testProp prop and add the sayHello method.

We also add a watcher for testProp in watch which calls sayHello when testProp changes value.

Then in the parent component, we write

<template>
  <div>
    <ChildComponent :testProp="trigger" />
  </div>
</template>

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

to add the ChildComponent and set the testProp prop to trigger.

And we change the trigger value to run sayHello.

Conclusion

To call a method in a child component with Vue.js, we can pass in a prop from the parent component to its child.

Then in the child component, we watch the prop’s value and run the method we want.

Sometimes, we want to fix the ‘component lists rendered with v-for should have explicit keys’ warning with Vue.js.

In this article, we’ll look at how to fix the ‘component lists rendered with v-for should have explicit keys’ warning with Vue.js.

How to fix the ‘component lists rendered with v-for should have explicit keys’ warning with Vue.js?

To fix the ‘component lists rendered with v-for should have explicit keys’ warning with Vue.js, we should set the key prop of each item in the list to a unique value.

For instance, we write

<template>
  <div>
    <todo-item
      v-for="todoItem of todos"
      :data="todoItem"
      :key="todoItem.id"
    ></todo-item>
  </div>
</template>

to set the key prop to the todoItem.id value where todoItem.id is the unique ID for each item in the todos array.

Conclusion

To fix the ‘component lists rendered with v-for should have explicit keys’ warning with Vue.js, we should set the key prop of each item in the list to a unique value.

Sometimes, we want to add a radio button component with Vue.js.

In this article, we’ll look at how to add a radio button component with Vue.js.

How to add a radio button component with Vue.js?

To add a radio button component with Vue.js, we can add an input with the type attribute set to radio.

For instance, we write

<template>
  <div>
    <input type="radio" value="label" name="name" v-model="value" />
  </div>
</template>

to add a radio button into our template by adding an input element with the type attribute set to radio.

We set the v-model to value to bind the radio buttons’s selected value to the value reactive property.

Conclusion

To add a radio button component with Vue.js, we can add an input with the type attribute set to radio.

Sometimes, we want to programmatically bind custom events for dynamic components in Vue.js.

In this article, we’ll look at how to programmatically bind custom events for dynamic components in Vue.js.

How to programmatically bind custom events for dynamic components in Vue.js?

To programmatically bind custom events for dynamic components in Vue.js, we can use the this.$on method.

For instance, we write

<script>
export default {
  //...
  created() {
    const EVENTS = [
      { name: "my-event1", callback: () => console.log("event1") },
      { name: "my-event2", callback: () => console.log("event2") },
      { name: "my-event3", callback: () => console.log("event3") },
    ];

    for (const e of EVENTS) {
      this.$on(e.name, e.callback);
    }

    this.$on(["click", "keyup"], (e) => {
      console.log("event", e);
    });
  },
};
</script>

to call this.$on with one event name and a event handler callback as did in the for-of loop.

We can also call this.$on with an array of event names and an event handler callback for all the events.

Conclusion

To programmatically bind custom events for dynamic components in Vue.js, we can use the this.$on method.