Home » vue » Vue Js filters not working

Vue Js filters not working

Posted by: admin November 26, 2021 Leave a comment

Questions:

I’m having achieving a data set through axios which I’m trying to display in VueJs, Following is the data set:

{
"model":[
    {
        "id":2,
        "company_id":5,
        "salutation":"Mr",
        "first_name":"Check",
        "last_name":"Contact",
        "number":"234567890",
        "email":"[email protected]",
        "alt_email":null,
        "address":"Thane",
        "city":"Thane",
        "state":"Maharastra",
        "country":"India",
        "profile":"Research-Corporate Access",
        "sectors_interested":"[\"Infrastructure\",\"Financial Services\",\"Capital Goods\",\"Pharmaceuticals\",\"Real Estate\"]",
        "companies_interested":"[{\"value\":7,\"label\":\"Test Company 4\"}]",
        "created_at":"2017-06-02 19:32:30",
        "updated_at":"2017-06-02 19:32:30",
        "deleted_at":null,
        "company":{
            "id":5,
            "name":"Test Company 3",
            "address":"Andheri",
            "city":"Mumbai",
            "state":null,
            "country":"India",
            "type":"Research-Tier II",
            "is_client":0,
            "created_at":"2017-06-02 14:48:20",
            "updated_at":"2017-06-02 14:48:20",
            "deleted_at":null
        }
    },
    {
        "id":3,
        "company_id":4,
        "salutation":"Mr",
        "first_name":"Check 1",
        "last_name":"Contact",
        "number":null,
        "email":"[email protected]",
        "alt_email":null,
        "address":null,
        "city":null,
        "state":null,
        "country":null,
        "profile":"Investor-Research Head",
        "sectors_interested":"[\"Economics\",\"Real Estate\",\"Auto\",\"Consumer\",\"Logistics\",\"Oil & Gas\",\"Industrial\",\"Capital Goods\"]",
        "companies_interested":"[{\"value\":7,\"label\":\"Test Company 4\"},{\"value\":8,\"label\":\"Test Company 5\"}]",
        "created_at":"2017-06-03 06:28:03",
        "updated_at":"2017-06-03 06:28:03",
        "deleted_at":null,
        "company":{
            "id":4,
            "name":"Test Company 2",
            "address":"Chennai",
            "city":"Chennai",
            "state":null,
            "country":"India",
            "type":"Investor-Mutual Fund",
            "is_client":0,
            "created_at":"2017-06-02 06:42:16",
            "updated_at":"2017-06-02 15:32:17",
            "deleted_at":null
        }
    },
]
}

So basically I’m getting this data set and trying to have filter in this, I defined the data set as model: {} in data() and I’m having a method as fetchContactData() which sets the data into model now after getting the response when I console.log(this.model) I get the object set like this:

enter image description here

but for filtering the data set is not getting:

I’ve my filter functions in computed property

contacts: function() {
    if(this.model)
    {
        return this.model
             .filter(f => (f.company.is_client == 0))
            .map(d => ({label: d.name, value: d.id}))
    }
},

But here this.model is not working I’m getting error of this

Error in render function: “TypeError: this.model.filter is not a function”

When I do console.log(this.model) before if statement, I get this:

enter image description here

If I do console.log(this) I can see the desired value being placed in model[!

enter image description here

Answers:

When you initialize the component, you set model to an object.

I defined the data set as model: {} in data()

Objects do not have a filter method. Instead, initialize the model to an empty array.

data(){
    return {
        model: []
    }
}