Category: Vue

Sometimes, we want to get query parameters from a URL in Vue.js.

In this article, we’ll look at how to get query parameters from a URL in Vue.js.

How to get query parameters from a URL in Vue.js?

To get query parameters from a URL in Vue.js, we can use the this.$route.query property in a component.

For instance, we write

this.$route.query.test

to get the value of the test query parameter from a query string.

Conclusion

To get query parameters from a URL in Vue.js, we can use the this.$route.query property in a component.

Sometimes, we want to fix the ‘Module not found: Error: Can’t resolve vue, path not correct’ error in a Vue.js project.

In this article, we’ll look at how to fix the ‘Module not found: Error: Can’t resolve vue, path not correct’ error in a Vue.js project.

How to fix the ‘Module not found: Error: Can’t resolve vue, path not correct’ error in a Vue.js project?

To fix the ‘Module not found: Error: Can’t resolve vue, path not correct’ error in a Vue.js project, change our Webpack config.

We change the Webpack config file in our project to include

{
  //...
  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.vue'],
    alias: {
      'vue': '@vue/runtime-dom'
    }
  },
  //...
}

so the the vue module references '@vue/runtime-dom'.

Conclusion

To fix the ‘Module not found: Error: Can’t resolve vue, path not correct’ error in a Vue.js project, change our Webpack config.

Sometimes, we want to mock methods on a Vue.js instance in tests.

In this article, we’ll look at how to mock methods on a Vue.js instance in tests.

How to mock methods on a Vue.js instance in tests?

To mock methods on a Vue.js instance in tests, we can use jest.spyOn.

For instance, we write

import MyComponent from "@/components/MyComponent.vue";

describe("MyComponent", () => {
  it("click does something", async () => {
    const mockMethod = jest.spyOn(MyComponent.methods, "doSomething");
    await shallowMount(MyComponent).find("button").trigger("click");
    expect(mockMethod).toHaveBeenCalled();
  });
});

to add a test that spies on the MyComponent‘s doSomething method with

jest.spyOn(MyComponent.methods, "doSomething")

Then we click the button that triggers doSomething to run with

await shallowMount(MyComponent).find("button").trigger("click");

And then we check that doSomething is called after button click with

expect(mockMethod).toHaveBeenCalled();

Conclusion

To mock methods on a Vue.js instance in tests, we can use jest.spyOn.

Sometimes, we want to access a Vue.js component instance or data inside filter method.

In this article, we’ll look at how to access a Vue.js component instance or data inside filter method.

How to access a Vue.js component instance or data inside filter method?

To access a Vue.js component instance or data inside filter method, we can pass the component data into the filter as arguments.

For instance, we write

<template>
  <div id="app">
    {{ amount | currency(exchangeRate) }}
  </div>
</template>

<script>
//...
export default {
  //...
  filters: {
    currency(amount, exchange) {
      return amount * exchange;
    },
  },
  //...
};
</script>

to set amount as the value of the amount parameter of the currency filter and exchangeRate as the value of the exchange parameter with

{{ amount | currency(exchangeRate) }}

Then we return the 2 values multiplied together and return it so the product will be rendered in the template.

Conclusion

To access a Vue.js component instance or data inside filter method, we can pass the component data into the filter as arguments.

Sometimes, we want to stop Vue.js from converting input[type=number] input value to a string value.

In this article, we’ll look at how to stop Vue.js from converting input[type=number] input value to a string value.

How to stop Vue.js from converting input[type=number] input value to a string value?

To stop Vue.js from converting input[type=number] input value to a string value, we can add the number modifier to v-model.

For instance, we write

<template>
  <form>
    <input v-model.number="quantity" type="number" />
  </form>
</template>

to add the number modifier after v-model.

As a result, quantity would be a number instead of a string.

Conclusion

To stop Vue.js from converting input[type=number] input value to a string value, we can add the number modifier to v-model.