Category: JavaScript

Sometimes, we want to file input value change in Vue.js.

In this article, we’ll look at how to file input value change in Vue.js.

How to file input value change in Vue.js?

To file input value change in Vue.js, we can add the @change directive to our file input.

For instance, we write

<template>
  <div>
    <input type="file" @change="previewFiles" multiple />
  </div>
</template>

<script>
//...
export default {
  //...
  methods: {
    previewFiles(event) {
      console.log(event.target.files);
    },
  },
  //...
};
</script>

to add the file input with

<input type="file" @change="previewFiles" multiple />

The previewFiles method runs when we select files with the file input because we added @change="previewFiles".

In previewFiles, we get the selected files with the event.target.files property.

Conclusion

To file input value change in Vue.js, we can add the @change directive to our file input.

Sometimes, we want to get route by name and parameters with Vue Router.

In this article, we’ll look at how to get route by name and parameters with Vue Router.

How to get route by name and parameters with Vue Router?

To get route by name and parameters with Vue Router, we can use the this.$router.resolve method.

For instance, we write

const props = this.$router.resolve({
  name: "ProductDetail",
  params: { id, slug },
});
console.log(props.href);

to call this.$router.resolve with an object that has the route name and the query string params key-value pairs in it.

Then we get the resolved URL string from the props.href property.

Conclusion

To get route by name and parameters with Vue Router, we can use the this.$router.resolve method.

Sometimes, we want to implement Google Login API in Vue.js.

In this article, we’ll look at how to implement Google Login API in Vue.js.

How to implement Google Login API in Vue.js?

To implement Google Login API in Vue.js, we can use the gap.signin2.render method.

For instance, we write

<template>
  <div id="google-signin-button"></div>
</template>

<script>
//...
export default {
  mounted() {
    gapi.signin2.render("google-signin-button", {
      onsuccess: this.onSignIn,
    });
  },
  methods: {
    onSignIn(user) {
      const profile = user.getBasicProfile();
    },
  },
};
</script>

to call gapi.signin2.render to render the sign in page contents in the div with ID google-signin-button.

We set onsuccess to this.onSignIn to call it when sign in is successful.

Conclusion

To implement Google Login API in Vue.js, we can use the gap.signin2.render method.

Sometimes, we want to pass styles to child component and use it as scoped style in Vue.js.

In this article, we’ll look at how to pass styles to child component and use it as scoped style in Vue.js.

How to pass styles to child component and use it as scoped style in Vue.js?

To pass styles to child component and use it as scoped style in Vue.js, we can use the deep selector.

For instance, we write

a >>> b {
  color: red;
}
/deep/ a b {
  color: red;
}
a::v-deep b {
  color: red;
}

to add the deep select with >>>, /deep/ or ::v-deep.

They all select the b select in a.

Conclusion

To pass styles to child component and use it as scoped style in Vue.js, we can use the deep selector.

Sometimes, we want to use multiple condition in v-if in Vue.js.

In this article, we’ll look at how to use multiple condition in v-if in Vue.js.

How to use multiple condition in v-if in Vue.js?

To use multiple condition in v-if in Vue.js, we can add them all into v-if.

For instance, we write

<template>
  <div>
    <div v-if="item.fullName !== null && item.fullName !== ''"></div>
  </div>
</template>

to check if item.fullName isn’t null or an empty string with item.fullName !== null && item.fullName !== ''.

If both conditions return true, then we render the div.

Conclusion

To use multiple condition in v-if in Vue.js, we can add them all into v-if.