Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
Vue Answers

How to reference static assets within Vue.js and JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to reference static assets within Vue.js and JavaScript.

In this article, we’ll look at how to reference static assets within Vue.js and JavaScript.

How to reference static assets within Vue.js and JavaScript?

To reference static assets within Vue.js and JavaScript, we can use @/ as the alias of the src/ folder.

For instance, we write

<img src="@/assets/images/home.png"/>

to set the src attribute of the img element to @/assets/images/home.png which is the same as src/assets/images/home.png in the Vue project folder.

Conclusion

To reference static assets within Vue.js and JavaScript, we can use @/ as the alias of the src/ folder.

Categories
JavaScript Answers

How to obtain the query string from the current URL with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to obtain the query string from the current URL with JavaScript.

In this article, we’ll look at how to obtain the query string from the current URL with JavaScript.

How to obtain the query string from the current URL with JavaScript?

To obtain the query string from the current URL with JavaScript, we can use the URL constructor.

For instance, we write

const params = new URL(document.location).searchParams;
const name = params.get("name");

to get the current URL with document.location to get a URL object from the current location object.

Then we use the searchParams property to get the query string from the current URL.

Next, we call get with the query parameter key to return the value of the query parameter with the given key.

Conclusion

To obtain the query string from the current URL with JavaScript, we can use the URL constructor.

Categories
React Answers

How to toggle the boolean state of a React component?

Labrador retriever puppy walking on green grass

Sometimes, we want to toggle the boolean state of a React component.

In this article, we’ll look at how to toggle the boolean state of a React component.

How to toggle the boolean state of a React component?

To toggle the boolean state of a React component, we can call the state setter function with a function that returns the latest boolean value.

For instance, we write

const Comp = () => {
  const [check, setCheck] = useState(false);
  // ...
  const toggle = () => {
    setCheck((prevCheck) => !prevCheck);
  };

  //...
};

to create the check state in the Comp component.

Then we add the toggle function that calls setCheck with a function that returns the original value of the check state, which is prevCheck, negated to set check to the negated value of prevCheck.

Conclusion

To toggle the boolean state of a React component, we can call the state setter function with a function that returns the latest boolean value.

For instance, we write

Categories
Vue Answers

How to detect mouseover or hover with Vue.js?

Labrador retriever puppy walking on green grass

Sometimes, we want to detect mouseover or hover with Vue.js.

In this article, we’ll look at how to detect mouseover or hover with Vue.js.

How to detect mouseover or hover with Vue.js?

To detect mouseover or hover with Vue.js, we can listen for the mouseover and mouseleave events.

For instance, we write

<template>
  <div @mouseover="upHere = true" @mouseleave="upHere = false">
    <h2>Something</h2>
    <some-component v-show="upHere"></some-component>
  </div>
</template>

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

to listen to the mouseover and mouseleave events triggered from the div with @mouseover and @mouseleave.

We set upHere to true if the mouse pointer is in the div and we set upHere to false when the mouse pointer leaves the div.

And we add the upHere reactive property to the object returned by data.

Conclusion

To detect mouseover or hover with Vue.js, we can listen for the mouseover and mouseleave events.

Categories
Vue Answers

How to open a link in a new tab with Vue Router?

Labrador retriever puppy walking on green grass

Sometimes, we want to open a link in a new tab with Vue Router.

In this article, we’ll look at how to open a link in a new tab with Vue Router.

How to open a link in a new tab with Vue Router?

To open a link in a new tab with Vue Router, we can use the this.$router.resolve method to get the full object with the URL of a given route.

Then we call window.open with the route object’s href property URL and '_blank' to open the URL in the new tab.

For instance, in our component method or hook, we write

const routeData = this.$router.resolve({
  name: "routeName",
  query: { data: "someData" },
});
window.open(routeData.href, "_blank");

to call this.$router.resolve with an object that has the route name and query query parameters object.

resolve returns an object with the href property that has the full URL of the route.

Then we call window.open with routeData.href and '_blank' to open the routeData.href URL in a new tab.

Conclusion

To open a link in a new tab with Vue Router, we can use the this.$router.resolve method to get the full object with the URL of a given route.

Then we call window.open with the route object’s href property URL and '_blank' to open the URL in the new tab.