Category: Vue

Sometimes, we want to get previous page URL with Vue Router.

In this article, we’ll look at how to get previous page URL with Vue Router.

How to get previous page URL with Vue Router?

To get previous page URL with Vue Router, we can get it from the from parameter of the beforeRouterEnter hook.

For instance, we write

<script>
export default {
  //...
  beforeRouteEnter(to, from, next) {
    console.log(from);
  },
  //...
};
</script>

to add the beforeRouteEnter hook into our component and get the previous page URL from the from parameter.

Conclusion

To get previous page URL with Vue Router, we can get it from the from parameter of the beforeRouterEnter hook.

Sometimes, we want to fix the ‘Avoided redundant navigation to current location’ error in Vue.js.

In this article, we’ll look at how to fix the ‘Avoided redundant navigation to current location’ error in Vue.js.

How to fix the ‘Avoided redundant navigation to current location’ error in Vue.js?

To fix the ‘Avoided redundant navigation to current location’ error in Vue.js, we can call $router.push only if the route isn’t the same as the current route.

For instance, we write

if (this.$route.path !== "/dashboard") {
  this.$router.push("/dashboard");
}

to check if the current route isn’t /dashboard with

this.$route.path !== "/dashboard"

If it’s true, then we go to /dashboard with

this.$router.push("/dashboard");

Conclusion

To fix the ‘Avoided redundant navigation to current location’ error in Vue.js, we can call $router.push only if the route isn’t the same as the current route.

Sometimes, we want to call a parent component’s method within a component with Vue.js.

In this article, we’ll look at how to call a parent component’s method within a component with Vue.js.

How to call a parent component’s method within a component with Vue.js?

To call a parent component’s method within a component with Vue.js, we can get the parent component’s method from this.$parent.

For instance, we write

<script>
export default {
  //...
  methods: {
    someMethod() {
      this.$parent.someMethod();
    },
  },
  //...
};
</script>

to call the parent’s someMethod method with this.$parent.someMethod();.

Conclusion

To call a parent component’s method within a component with Vue.js, we can get the parent component’s method from this.$parent.

Sometimes, we want to access properties of an object in a Vuetify v-select with Vue.js.

In this article, we’ll look at how to access properties of an object in a Vuetify v-select with Vue.js.

How to access properties of an object in a Vuetify v-select with Vue.js?

To access properties of an object in a Vuetify v-select with Vue.js, we can set the item-text prop to the property that we want to render as the drop down options’ text.

For instance, we write

<template>
  <div>
    <v-select
      :items="categories"
      v-model="category"
      name="category"
      item-text="name"
      label="Select a category"
    />
  </div>
</template>

to set the item-text prop to 'name' so that the value of the name property of each item in categories would be rendered as the text for each option.

Conclusion

To access properties of an object in a Vuetify v-select with Vue.js, we can set the item-text prop to the property that we want to render as the drop down options’ text.

Sometimes, we want to add a file upload input with Vuetify.

In this article, we’ll look at how to add a file upload input with Vuetify.

How to add a file upload input with Vuetify?

To add a file upload input with Vuetify, we can add a v-btn button with a hidden file input.

For instance, we write

<template>
  <div>
    <v-btn color="success" @click="$refs.inputUpload.click()">
      select file
    </v-btn>
    <input v-show="false" ref="inputUpload" type="file" @change="onChange" />
  </div>
</template>

to add a Vuetify button with v-btn.

And we add the file input and assign a ref to it with

<input v-show="false" ref="inputUpload" type="file" @change="onChange" />

We add ref="inputUpload" so $refs.inputUpload is set to the file input.

Then we open the file selector window on button click with

@click="$refs.inputUpload.click()"

And we hide the input with

v-show="false"

Conclusion

To add a file upload input with Vuetify, we can add a v-btn button with a hidden file input.