Category: Vue Answers

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.

Sometimes, we want to fix click event target gives element or it’s child and not parent element with Vue.js.

In this article, we’ll look at how to fix click event target gives element or it’s child and not parent element with Vue.js.

How to fix click event target gives element or it’s child and not parent element with Vue.js?

To fix click event target gives element or it’s child and not parent element with Vue.js, we should use the event.currentTarget property.

For instance, we write

<template>
  <div>
    <a
      href="javascript:;"
      @click="showDetails(notification, $event)"
      v-for="notification in notifications"
      :key="notification.id"
    >
      <h4>title</h4>
      <p>test</p>
    </a>
  </div>
</template>

<script>
export default {
  //...
  methods: {
    showDetails(notification, event) {
      //...
      console.dir(event.currentTarget);
    },
  },
};
</script>

to log event.currentTarget when the showDetails method runs.

It runs when we click on an anchor element.

event.currentTarget always has the element that we clicked on.

Conclusion

To fix click event target gives element or it’s child and not parent element with Vue.js, we should use the event.currentTarget property.

Sometimes, we want to set a radio button checked if statement is true with Vue.js.

In this article, we’ll look at how to set a radio button checked if statement is true with Vue.js.

How to set a radio button checked if statement is true with Vue.js?

To set a radio button checked if statement is true with Vue.js, we should set the checkbox’s checked prop.

For instance, we write

<template>
  <div>
    <div v-for="portal in portals">
      <input
        type="radio"
        name="portalSelect"
        v-model="newPortalSelect"
        :checked="portal.id == currentPortalId"
      />
    </div>
  </div>
</template>

to add the checked prop and set it to portal.id == currentPortalId.

As a result, when portal.id == currentPortalId returned true, we see the radio button selected.

Conclusion

To set a radio button checked if statement is true with Vue.js, we should set the checkbox’s checked prop.

Sometimes, we want to access a method from another method with Vue.js.

In this article, we’ll look at how to access a method from another method with Vue.js.

How to access a method from another method with Vue.js?

To access a method from another method with Vue.js, we use this.

For instance, we write

<script>
export default {
  //...
  methods: {
    methodA() {
      // ...
    },
    methodB() {
      this.methodA();
    },
    //...
  },
};
</script>

to call methodA in methodB by using this.methodA().

Conclusion

To access a method from another method with Vue.js, we use this.

Sometimes, we want to fix the "’v-slot’ directive doesn’t support any modifier" ESLint error in Vue.js.

In this article, we’ll look at how to fix the "’v-slot’ directive doesn’t support any modifier" ESLint error in Vue.js.

How to fix the "’v-slot’ directive doesn’t support any modifier" ESLint error in Vue.js?

To fix the "’v-slot’ directive doesn’t support any modifier" ESLint error in Vue.js, we wrap our slot name with periods in the name with backticks.

For instance, we write

<template>
  <template v-slot:[`item.actions`]="{ item }"> ... </template>
</template>

to add the item.actions slot with v-slot:[item.actions] to avoid having the "’v-slot’ directive doesn’t support any modifier" being thrown when we use ESLint in our Vue CLI project.

Conclusion

To fix the "’v-slot’ directive doesn’t support any modifier" ESLint error in Vue.js, we wrap our slot name with periods in the name with backticks.