What is the solution for the error message "this.filters is not a function" in Vue.js 2?

Question

What is the solution for the error message "this.filters is not a function" in Vue.js 2?

Here is the code for my component:

<script>
    import _ from 'lodash'
    export default{
        props:['search','category'],
        data(){
            return{
                price_min:'',
                price_max:''
            }
        },
        computed:{
            filters(data){
                const price = {min:this.price_min, max:this.price_max}
                return {q:this.search, category:this.category, sort:data, location:data, price}
            },
        },
        methods:{
            filterProduct: _.debounce(function(data=null){
                    this.$store.dispatch('getProducts', this.filters(data))
            },500)
        }
    }
</script>

You can view the full code here.

After executing the code, I encountered an error in the console:

Uncaught TypeError: this.filters is not a function

Any suggestions on how to resolve this error?

javascript vue.js laravel-5.3 vuejs2 vue-component

Answer 1

Answer №1

    computed:{
        filters(data) { // the first argument is expected to be the `this` 
            const price = {min:this.price_min, max:this.price_max}
            return {q:this.search, category:this.category, sort:data, location:data, price}
        },
    },
    methods:{
        filterProduct (data = null) {
           return _.debounce(function (data=null) => {
             this.$store.dispatch('getProducts', this.filters(data))
           },500).call(this, data)
        } 
    }

You have lost context to the vue component instance by using an anonymous function. ~~Try using an arrow function or storing the context in a variable like let self = this~~

In this scenario, using _.debounce(fn() {}, ms) results in losing the reference to this.

To address this issue, I moved the debounce logic inside a method that explicitly sets this to refer to the Vue component instance.

Furthermore, computed properties are meant for returning values based on existing data, not executing functions. Hence, calling this.filters(data) would still cause an error as it's a property rather than a method. Consider using a method instead.

Answer 2

    computed:{
        filters(data) { // the first argument is expected to be the `this` 
            const price = {min:this.price_min, max:this.price_max}
            return {q:this.search, category:this.category, sort:data, location:data, price}
        },
    },
    methods:{
        filterProduct (data = null) {
           return _.debounce(function (data=null) => {
             this.$store.dispatch('getProducts', this.filters(data))
           },500).call(this, data)
        } 
    }

You have lost context to the vue component instance by using an anonymous function. ~~Try using an arrow function or storing the context in a variable like let self = this~~

In this scenario, using _.debounce(fn() {}, ms) results in losing the reference to this.

To address this issue, I moved the debounce logic inside a method that explicitly sets this to refer to the Vue component instance.

Furthermore, computed properties are meant for returning values based on existing data, not executing functions. Hence, calling this.filters(data) would still cause an error as it's a property rather than a method. Consider using a method instead.

What is the solution for the error message "this.filters is not a function" in Vue.js 2?

Answer №1

Similar questions

Challenges with optimization in AngularJS and Angular Material

Utilizing Vue to properly reference asset paths for background URLs

PropType missing in 'vue' library within an open-source project

What is the best way to retrieve the page slug within the layout file in Next.js, specifically when using the app folder structure?

Establish a connection with the hivemq broker using MQTT protocol

Updating an image using AJAX and Flask

When fetching data from a parse object, JavaScript displayed [object, Object] as the result

I would greatly appreciate some guidance on asp.net and javascript

What steps should I take to repair my jQuery button slider?

CSS Class Returns to Inactive State

I am experiencing unexpected results with my Mongoose filter and sort query in Express JS middleware. The output does not match what I am anticipating, and the sorting functionality seems to

retrieve file through an ajax call

If a checkbox is checked, then the value in the textbox should be multiplied by 0

Decrease initial loading time for Ionic 3

How to resolve a TypeError saying "Object(...) is not a function"?

Iterating over an object while omitting certain elements

The ES6 class Inheritance chain does not properly utilize the instanceof keyword

`Incorporating JavaScript for Menu Navigation on the Homepage: Challenges Ahead`

Oops! Remember to always `await server.start()` first before using `server.createHandler()` in next.js

Select2 eliminates every tag except the first one