Category: JavaScript

Sometimes, we want to set a background image in a style attribute with Vue.js.

In this article, we’ll look at how to set a background image in a style attribute with Vue.js.

How to set a background image in a style attribute with Vue.js?

To set a background image in a style attribute with Vue.js, we can set the style prop to an object with the background-image property.

For instance, we write

<template>
  <div>
    <div
      class="card-image"
      :style="{
        'background-image': `url(${require('@/assets/images/cards.jpg')})`,
      }"
    >
      ...
    </div>
  </div>
</template>

to set the style prop to an object with the background-image property set to a string with the path of the background image wrap around url().

@/ is a shorthand for the src folder.

Conclusion

To set a background image in a style attribute with Vue.js, we can set the style prop to an object with the background-image property.

Sometimes, we want to get the DOM element that correspond to the Vue.js component.

In this article, we’ll look at how to get the DOM element that correspond to the Vue.js component.

How to get DOM element that correspond to the Vue.js component?

To get the DOM element that correspond to the Vue.js component, we can use this.$el to get the root element of the current component.

And we can use this.$refs to get the element that’s been assigned the ref.

For instance, we write

<template>
  <div>
    root element
    <div ref="childElement">child element</div>
  </div>
</template>

<script>
export default {
  mounted() {
    const rootElement = this.$el;
    const childElement = this.$refs.childElement;
    console.log(rootElement);
    console.log(childElement);
  },
};
</script>

to get the root div with this.$el.

And we get the div that’s been assigned the childElement with ref="childElement" with this.$refs.childElement.

Conclusion

To get the DOM element that correspond to the Vue.js component, we can use this.$el to get the root element of the current component.

And we can use this.$refs to get the element that’s been assigned the ref.

Sometimes, we want to enclose a router-link tag in a button in Vue Router and Vue.js.

In this article, we’ll look at how to enclose a router-link tag in a button in Vue Router and Vue.js.

How to enclose a router-link tag in a button in Vue Router and Vue.js?

To enclose a router-link tag in a button in Vue Router and Vue.js, we can set the tag prop of the router-link component.

For instance, we write

<template>
  <div>
    <router-link to="/foo" tag="button">foo</router-link>
  </div>
</template>

to set the tag prop to button to render the router-link as a button.

Conclusion

To enclose a router-link tag in a button in Vue Router and Vue.js, we can set the tag prop of the router-link component.

Sometimes, we want to define common constants in Vue.js.

In this article, we’ll look at how to define common constants in Vue.js.

How to define common constants in Vue.js?

To define common constants in Vue.js, we can create a module that export an object with the constant values.

For instance, in deliverMethods.js, we write

const DELIVERY = "Delivery";
const CARRIER = "Carrier";
const COLLATION = "Collation";
const CASH_AND_CARRY = "Cash and carry";

export default {
  DELIVERY,
  CARRIER,
  COLLATION,
  CASH_AND_CARRY,
};

to export an object with some constants.

Then in our components, we can import our constant file and use it by writing

import DELIVER_METHODS from "./deliverMethods";

console.log(DELIVER_METHODS.CARRIER);

Conclusion

To define common constants in Vue.js, we can create a module that export an object with the constant values.

Sometimes, we want to redirect to requested page after login using Vue Router.

In this article, we’ll look at how to redirect to requested page after login using Vue Router.

How to redirect to requested page after login using Vue Router?

To redirect to requested page after login using Vue Router, we can use the this.$router.push method in our components.

For instance, we write

<script>
//...
export default {
  //...
  submitForm() {
    await authService.login(this.credentials);
    this.$router.push(this.$route.query.redirect || "/");
  },
  //...
};
</script>

to add the submitForm method that calls the authService.login method to authenticate the credentials data stored in this.credentials.

And if authentication is succcesful, we call this.$router.push with this.$route.query.redirect || "/" to redirect to the redirect URL we get from the redirect query parameter.

If redirect query parameter doesn’t exist, then we redirect to /.

Conclusion

To redirect to requested page after login using Vue Router, we can use the this.$router.push method in our components.