Category: Vue Answers

Sometimes, we want to render newline characters in our Vue.js app.

In this article, we’ll look at how to render newline characters in our Vue.js app.

Render Newline Characters in Vue.js

We can render newline characters in our Vue.js app with the pre tag.

For instance, we can write:

<template>
  <div id="app">
    <pre>{{ text }}</pre>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      text: `You can see the newline after me!\nWoohoo!`,
    };
  },
};
</script>

We have the text reactive property set to a string with a newline character.

Then we interpolate the text in the pre tag to render it as-is.

Conclusion

We can render newline characters in our Vue.js app with the pre tag.

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.