Category: JavaScript

Sometimes, we want to trigger events using Vue.js.

In this article, we’ll look at how to trigger events using Vue.js.

How to trigger events using Vue.js?

To trigger events using Vue.js, we can assign a ref to the element we want to trigger the element from.

And then we can use the element’s methods to trigger the event.

For instance, we write

<template>
  <div>
    <button type="button" @click="myClickEvent" ref="myBtn">Click Me!</button>
  </div>
</template>

<script>
//...
export default {
  //...
  methods: {
    myClickEvent($event) {
      const elem = this.$refs.myBtn;
      elem.click();
    },
  },
  //...
};
</script>

to assign the myBtn ref to the button.

We set @click to the myClickEvent method to call it when we click on the button.

Then in the myClickEvent method, we get the button element with this.$refs.myBtn and assign it to elem.

Finally, we call elem.click to trigger the click event on the button.

Conclusion

To trigger events using Vue.js, we can assign a ref to the element we want to trigger the element from.

And then we can use the element’s methods to trigger the event.

Sometimes, we want to set a checkbox as checked with Vue.js.

In this article, we’ll look at how to set a checkbox as checked with Vue.js.

How to set a checkbox as checked with Vue.js?

To set a checkbox as checked with Vue.js, we can add the checked attribute to our checkbox.

For instance, we write

<template>
  <div>
    <input type="checkbox" v-model="checked" checked />
  </div>
</template>

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

to add the checked attribute to make the checkbox input checked by default.

Also, we set v-model to checked to bind the check value after we manipulate the checkbox.

Conclusion

To set a checkbox as checked with Vue.js, we can add the checked attribute to our checkbox.

Sometimes, we want to share a method between components in Vue.js.

In this article, we’ll look at how to share a method between components in Vue.js.

How to share a method between components in Vue.js?

To share a method between components in Vue.js, we can use mixins.

For instance, we write

mixins/cartMixin.js

export default {
  methods: {
    addToCart() {
      //...
    },
  },
};

to create the cartMixin.js module that exports an object with the addToCart method inside.

Then we use the mixin in our component by writing

<script>
import cartMixin from "./mixins/cartMixin.js";
//...

export default {
  //...
  mixins: [cartMixin],
  //...
};
</script>

We set mixins to an array with the cartMixin inside to incorporate the addToCart method from the mixin into our component.

Conclusion

To share a method between components in Vue.js, we can use mixins.

Sometimes, we want to authenticate a Vue.js app with Azure AD.

In this article, we’ll look at how to authenticate a Vue.js app with Azure AD.

How to authenticate a Vue.js app with Azure AD?

To authenticate a Vue.js app with Azure AD, we can use the vue-adal package.

To install it, we run

npm install vue-adal

Then we can use it by writing

import Adal from 'vue-adal'

Vue.use(Adal, {
  config: {
    tenant: '<guid>',
    clientId: '<guid>',
    redirectUri: '<host addr>',
    cacheLocation: 'localStorage'
  },
  requireAuthOnInitialize: true,
  router
})

to call Vue.use with Adal to add the Adal plugin into our Vue app.

tenant is the multi-tenant gateway or Azure AD Tenant ID.

clientId is the app ID.

requireAuthOnInitialize is true if we need auth on startup.

And router is the Vue Router instance.

Conclusion

To authenticate a Vue.js app with Azure AD, we can use the vue-adal package.

Sometimes, we want to fire an event when v-model changes in Vue.js.

In this article, we’ll look at how to fire an event when v-model changes in Vue.js.

How to fire an event when v-model changes in Vue.js?

To fire an event when v-model changes in Vue.js, we can use the @input directive.

For instance, we write

<template>
  <div>
    <input @input="handleInput" />
  </div>
</template>

to run handleInput whenever the input value changes.

Conclusion

To fire an event when v-model changes in Vue.js, we can use the @input directive.