Author: John Au-Yeung

Sometimes, we want to prevent the click event from propagating to the parent when clicking a button inside an element with Vue.js.

In this article, we’ll look at how to prevent the click event from propagating to the parent when clicking a button inside an element with Vue.js.

Prevent the Click Event from Propagating to the Parent When Clicking a Button Inside an Element with Vue.js

We can prevent the click event from propagating to the parent when clicking a button inside an element with Vue.js with the self modifier.

For instance, we can write:

<template>
  <div id="app">
    <div class="parent" @click.self="showAlert('parent clicked')">
      <span class="child" @click="showAlert('child1 clicked')">Child1</span>
      <span class="child" @click="showAlert('child2 clicked')">Child2</span>
      <span class="child" @click="showAlert('child3 clicked')">Child3</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    showAlert(str) {
      alert(str);
    },
  },
};
</script>

<style scoped>
.parent {
  padding: 20px;
}
</style>

We add the self modifier to the @click directive on the outer div so that the click event will be confined to the parent div.

When we click on each div or span, the showAlert method will be run.

Conclusion

We can prevent the click event from propagating to the parent when clicking a button inside an element with Vue.js with the self modifier.

Sometimes, we want to toggle classes on click with Vue.js.

In this article, we’ll look at how to toggle classes on click with Vue.js.

Toggle Classes on Click with Vue.js

We can toggle classes by passing an object into the :class prop.

For instance, we write:

<template>
  <div id="app">
    <button @click="setActive">toggle class</button>
    <p :class="{ active }">hello</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      active: false,
    };
  },
  methods: {
    setActive() {
      this.active = !this.active;
    },
  },
};
</script>

<style scoped>
.active {
  color: red;
}
</style>

We have the setActive function that toggles the this.active reactive property.

We set that as the value of the @click directive to run it when we click the button.

Then we have :class=”{ active }” to add the active class when active is true .

And we set any element the active class to have color red.

Therefore, when we click the toggle class button, we should see the red color on the text toggle on and off.

Conclusion

We can toggle classes by passing an object into the :class prop.

Sometimes, we want to use setTimeout to run code after a delay with Vue.js.

In this article, we’ll look at how to use setTimeout to run code after a delay with Vue.js.

Use setTimeout with Vue.js

We can use setTimeout with Vue.js by passing in an arrow function as an argument into it.

For instance, we can write:

<template>
  <div id="app">
    <button @click="setShow">show</button>
    <p v-if="show">hello</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      show: false,
    };
  },
  methods: {
    setShow() {
      setTimeout(() => {
        this.show = true;
      }, 2000);
    },
  },
};
</script>

We have the setShow method that calls setTimeout with an arrow function that calls this.show to true as the first argument.

The 2nbd argument is the delay before running the callback in the first argument in milliseconds.

We’ve to use an arrow function to get the right value of this in the callback function.

this show be the component instance since arrow functions don’t bins to their value of this .

We set setShow as the value of the @click directive to run it when we click the button.

So when we click it, the div shows since show becomes true .

Conclusion

We can use setTimeout with Vue.js by passing in an arrow function as an argument into it.

Sometimes, we want to fire an event when the v-model value changes.

In this article, we’ll look at how to fire an event when the v-model value changes

Fire an Event When the v-model Value Changes

We can listen to the change event to do something when the v-model value changes value.

For instance, we can write:

<template>
  <div id="app">
    <input
      type="radio"
      name="fruit"
      value="apple"
      v-model="fruit"
      @change="onChange"
    />
    apple
    <input
      type="radio"
      name="fruit"
      value="orange"
      v-model="fruit"
      @change="onChange"
    />
    orange
    <input
      type="radio"
      name="fruit"
      value="grape"
      v-model="fruit"
      @change="onChange"
    />
    grape
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      fruit: "apple",
    };
  },
  methods: {
    onChange() {
      console.log(this.fruit);
    },
  },
};
</script>

We have 3 radio buttons bound to the fruit reactive property with v-model .

In each radio button, we have the @change directive set to the onChange method.

In onChange , we get the this.fruit value.

Now when we click on a radio button, the current this.fruit value should be logged.

It should be one of the value attribute value of each radio button.

Conclusion

We can listen to the change event to do something when the v-model value changes value.

Sometimes, we want to call a filter from a method inside the Vue component instance.

In this article, we’ll look at how to call a filter from a method inside the Vue component instance.

Call a Filter from a Method Inside the Vue Component Instance

We can call a filter from within the Vue component instance getting the filter function from the this.options.$filters property.

For instance, we can write:

<template>
  <div id="app">
    {{ truncatedText }}
  </div>
</template>

<script>
import Vue from "vue";

Vue.filter("truncate", (text, stop, clamp) => {
  return text.slice(0, stop) + (stop < text.length ? clamp || "..." : "");
});

export default {
  name: "App",
  computed: {
    truncatedText() {
      return this.$options.filters.truncate(
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        10,
        "..."
      );
    },
  },
};
</script>

We have the truncatedText property that returns the truncated text .

The filter is defined by the Vue.filter method with the name as the first argument.

The 2nd argument is the filter function.

To call the truncate filter method, we use this.$options.filters.truncate with the text to truncate, stop with the number of characters of the truncated text, and clamp with the abbreviation symbol after the truncated text.

Then we display the text in the template.

Conclusion

We can call a filter from within the Vue component instance getting the filter function from the this.options.$filters property.